html5中关于canvas画图之画圆形的实例介绍
利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线。
代码如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>html5圆形</title>
<script type=text/javascript>
window.addEventListener(load,function(){
//canvas的2d上下文
var ctx=document.getElementById(canvas).getContext(2d);
//圆1
ctx.beginPath();
ctx.arc(150,45,35,0,Math.PI*2,false);
ctx.fillStyle=rgba(192,80,77,0.7);//半透明的红色
ctx.fill();
ctx.strokeStyle=rgba(192,80,77,1);//红色
ctx.stroke();
//圆2
ctx.beginPath();
ctx.arc(125,95,35,0,Math.PI*2,false);
ctx.fillStyle=rgba(155,187,89,0.7);//半透明绿色
ctx.fill();
ctx.strokeStyle=rgba(155,187,89,1);//绿色
ctx.stroke();
//圆3
ctx.beginPath();
ctx.arc(175,95,35,Math.PI*2,false);
ctx.fillStyle=rgba(128,100,162,0.7);//半透明的紫色
ctx.fill();
ctx.strokeStyle=rgba(128,100,132,1);//紫色
ctx.stroke();
});
</script>
</head>
<body>
<canvas id=canvas width=600 height=600></canvas>
</body>
</html>
上图是绘制的三个圆形相互折腾的，另外可以直接修改那个开始角度和结束弧度来画弧线。
以上就是html5中关于canvas画图之画圆形的实例介绍的详细内容，更多请关注双恒网络其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
云资源网
