This post will cover the last part of the series. Specifically, we'll draw a circle using HTML5 Canvas. If you find the explanation difficult to understand, please review the previous parts of the tutorial. I covered a lot of basic information in those parts.
Alright, here we go!
Circle:
As usual, please check out the code first and try to see if you can understand it. Then, you can read the explanation.
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </body> </html><canvas>: as usual, we define a canvas with specified dimension and id. We also make the canvas border visible for easy drawing.
<script>: we first get a reference to our canvas and then get the its 2D drawing context. If you don't know what a context is, please review the second part of the tutorial.
- fillStyle(): use red color to fill our circle.
- beginPath(): this method creates a new path for custom drawings. What is a path? It is a collection of different sketches and strokes. A shape is considered a path because a shape is made up of many different strokes (lines, arcs, ...). Each path has its own properties such as stroke color and fill color.
- arc(): draw an arc or a circle. The full method signature is arc( center_x, center_y, radius, startAngle, endAngle, antiClockwise).
center_x and center_y: the coordinates of the center of the circle or arc.
radius: radius of the circle / arc.
startAngle and endAngle: start and end point of the circle / arc in radian. If you forgot your trigonometry, use this JavaScript formula to convert degree to radian (Math.Pi / 180) * degree. Since we draw circle, we need to start our angle at 0 and end our angle at 360 degree or PI * 2.
antiClockwise: a boolean that is true to draw the circle / arc anti-clockwise and false to do the opposite.
closePath(): end the path after we has done our drawing. When drawing many different shapes on the same canvas, we must call beginPath() and closePath() for each shape.
fill(): fill our circle with specified color (red).Here is a picture. Hope it helps to clear up any confusion:
Well, that concludes our tutorial. If you have any question / suggestion please leave it in the comment below.
I'm preparing for more advanced tutorial on HTML5 Canvas! So check back for more goodies later :)
its very nice its helped me alot ,,,,,,,,,
ReplyDeletethanks..............................
It's awesome explanation i got all my doubts clear...thank you so much,,i will come by your blog to learn more..as i am learning HTML5 these days..so ya you keep going and all the best for every step you take,,
ReplyDelete