HTML5 Canvas: Drawing Circles
Introduction
With the introduction of the canvas element in HTML5, we can now draw complex graphics right in our web pages. One of the most basic shapes that we can draw is a circle.
Using the arc() Method
To draw a circle using the HTML5 canvas, we can use the arc() method. This method takes six parameters:
- x-coordinate of the center of the circle
- y-coordinate of the center of the circle
- radius of the circle
- starting angle of the arc, in radians
- ending angle of the arc, in radians
- whether or not to draw the counter-clockwise direction
For example, the following code draws a circle with a radius of 50 pixels at the center of the canvas:
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI, false); ctx.stroke(); Conclusion
Drawing circles on the HTML5 canvas is a simple and straightforward process. By using the arc() method, we can create circles of any size or color. With a little bit of creativity, you can use circles to create a wide variety of graphics and animations.
Komentar