How to use canvas to draw hollow circles and solid circles in html5-H5 Tutorial-php.cn

How to use canvas to draw hollow circles and solid circles in html5

不言

Release： 2018-06-22 15:03:38

Original

3659 people have browsed it

This article mainly introduces how to use canvas to draw hollow circles and solid circles in HTML5. Friends who need it can refer to it

Here I will share with you an example of how to draw hollow circles and solid circles when learning canvas. The exercises are very simple.

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

Copy after login

var canvas=document.getElementById("canvas");
     var cxt=canvas.getContext("2d");
     //画一个空心圆
     cxt.beginPath();
     cxt.arc(200,200,50,0,360,false);
     cxt.lineWidth=5;
     cxt.strokeStyle="green";
     cxt.stroke();//画空心圆
     cxt.closePath();
     //画一个实心圆
     cxt.beginPath();
     cxt.arc(200,100,50,0,360,false);
     cxt.fillStyle="red";//填充颜色,默认是黑色
     cxt.fill();//画实心圆
     cxt.closePath();
     //空心和实心的组合
     cxt.beginPath();
     cxt.arc(300,300,50,0,360,false);
     cxt.fillStyle="red";
     cxt.fill();
     cxt.strokeStyle="green";
     cxt.stroke();
     cxt.closePath();

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the properties of canvas lines

How to use HTML5 canvas to implement snowflakes Falling

The above is the detailed content of How to use canvas to draw hollow circles and solid circles in html5. For more information, please follow other related articles on the PHP Chinese website!