这篇文章主要介绍了html5使用canvas画空心圆与实心圆,需要的朋友可以参考下
这里给大家分享的是一个学习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();
登录后复制
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于canvas线条的属性
关于canvas线条的属性
以上就是html5如何使用canvas画空心圆与实心圆的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3124374.html
