HTML5 uses canvas to draw hollow circles and solid circles_html5 tutorial skills

What I share with you here is an exercise on drawing hollow circles and solid circles that I did when I was learning canvas. It is very simple.

<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>

Copy code

The code is as follows:

var canvas=document.getElementById("canvas");
var cxt= canvas.getContext("2d");
//Draw a hollow circle
cxt.beginPath();
cxt.arc(200,200,50,0,360,false);
cxt.lineWidth= 5;
cxt.strokeStyle="green";
cxt.stroke();//Draw a hollow circle
cxt.closePath();
//Draw a solid circle
cxt. beginPath();
cxt.arc(200,100,50,0,360,false);
cxt.fillStyle="red";//Fill color, the default is black
cxt.fill();// Draw a solid circle
cxt.closePath();
//Combination of hollow and solid
cxt.beginPath();
cxt.arc(300,300,50,0,360,false);
cxt.fillStyle="red";
cxt.fill();
cxt.strokeStyle="green";
cxt.stroke();
cxt.closePath();