4) HTML5 To create a graphical picture (HTML5 simple program)
- Mahesh Bhat
- Jul 5, 2017
- 1 min read
Output for the below source code :
The HTML5 code is :-
<html> <head> <title>NO PARKING </title>
<style type="text/css"> canvas { border:20px solid red } </style>
<script type="text/javascript"> function draw() <!-- The name of the function is draw()--> { var c=document.getElementById('x'); <!-- Declaring the ID - 'x' --> var context=c.getContext('2d'); <!-- Declaring variable context -->
context.font="40pt sans-serif"; <!-- Font sixe is 40pt --> context.fillText("NO",120,50); <!-- NO is the text , X axis is 120 , y axis is 50 in canvas page --> context.fillText("PARKING",50,280);
context.font="100pt sans-serif";<!-- Font sixe is 100pt --> context.fillText("P",114,205);
context.strokeStyle="red"; context.lineWidth=7; context.arc(150,150,75,0,Math.PI*2,true); <!-- Drawing the circle with syntax arc(X,Y, Radius , S-angle ,E-angle , Direction ) --> context.stroke(); context.moveTo(100,95); context.lineTo(205,205); <!--Drawing the line --> context.linewidth=4; <!-- Width of the line --> context.stroke(); <!-- To draw the graphical picture --> } </script> </head>
<body onload="draw();"> <canvas id="x" width="300" height="300"> </canvas>
</body> </html>
Commenti