How to draw a circle in HTML5 canvas? (code example)

Canvas can be used to draw various graphics, so how to use HTML5 canvas to draw a circle? This article will introduce to you the method of drawing circles on HTML5 canvas. Let’s take a look at the specific content.

Let’s look at the example directly

The code is as follows

       
   
Canvas Demo
  

Running results

Execute the above HTML file on the browser . The following effect will be displayed

Finally, the coordinates of the circle given by the arc() method are the center coordinates of the circle.

function draw() { var canvas = document.getElementById('SimpleCanvas'); if ( ! canvas || ! canvas.getContext ) { return false; } var cx = 360; var cy = 400; var radius = 36; var context = canvas.getContext('2d'); context.beginPath(); context.arc(cx, cy, radius, 0, 2 * Math.PI, false); context.fillStyle = '#9fd9ef'; context.fill(); context.lineWidth = 1; context.strokeStyle = '#00477d'; context.stroke(); context.beginPath(); context.moveTo(0, 0); context.lineTo(cx, cy); context.stroke(); }

The above is the detailed content of How to draw a circle in HTML5 canvas? (code example). For more information, please follow other related articles on the PHP Chinese website!