简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:864 次  日期:2015-01-29 16:04:40

温馨提示:易贤网小编为您整理了“html5使用canvas画空心圆与实心圆”,方便广大网友查阅!

<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></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();

更多信息请查看IT技术专栏

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:HTML5中drawImage用法分析
下一篇:html5的canvas方法使用指南
易贤网手机网站地址:html5使用canvas画空心圆与实心圆
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!