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

2019-10-25 11:19:43 织梦安装使用
  • 文章介绍

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


 

复制代码
代码如下:

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();

上一篇:html5使用canvas画三角形

下一篇:html5使用canvas画一条线

专业的织梦模板定制下载站,在线购买后即可下载!

商业源码

跟版网模板,累计帮助5000+客户企业成功建站,为草根创业提供助力!

立刻开启你的建站之旅

QQ在线客服

服务热线

织梦建站咨询