html5使用canvas画空心圆与实心圆

这里给大家分享的是一个学习canvas的时候做的画空心 圆 与实心圆的练习题，非常 简单 。

<canvas id="canvas" width="500" h ei ght="500" style="background-color: yellow;"></canvas>
&nbs p;

复制代码

代码如下:

VAR canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
//画一个空心圆
cxt.be gin Path();
cxt.arc(200,200,50,0, 360 ,false);
cxt.lineWidth=5;
cxt. stroke Style="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();

总结

以上是 为你收集整理的 html5使用canvas画空心圆与实心圆 全部内容，希望文章能够帮你解决 html5使用canvas画空心圆与实心圆 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5使用canvas画空心圆与实心圆的详细内容...