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

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

来源:易贤网   阅读:795 次  日期:2015-01-28 11:23:06

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

这里给大家分享的是一个学习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号码及交流群
上一篇:css中不确定高度垂直居中2种方法
下一篇:dedecms页面获取会员状态的方法
易贤网手机网站地址:html5使用canvas画空心圆与实心圆
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!