html5中关于canvas画图之画圆形的实例介绍

前端开发教程 2025-01-12 0

利用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画图之画圆形的实例介绍的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。