用canvas画布画同心圆（弧）

最新推荐文章于 2023-12-04 06:15:00 发布

七里香777

最新推荐文章于 2023-12-04 06:15:00 发布

阅读量1.4k

点赞数

分类专栏：笔记 # CSS 文章标签： canvas html

本文链接：https://blog.csdn.net/weixin_44286392/article/details/107618446

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

学会了用canvas画图之后，只需加个for循环，就可同时画很多图，或者像微波信号那样的圆弧。
效果图如下：
在这里插入图片描述

画图可参考（以太极图为例）：https://blog.csdn.net/weixin_44286392/article/details/107413822
源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
<body>
	<canvas id="mycanvas" width=500 height=500px  style="background:pink;">
			您的浏览器不支持canvas标签，无法看到图形
	</canvas>
	

	<script>
	var cav=document.getElementById("mycanvas");
	var cxt=cav.getContext("2d");
	
	 for(var i=0;i<10;i++){
	 	 cxt.beginPath()
	 	 // cxt.arc(230,200,10*(1+0.85*i),-45*Math.PI/180,45*Math.PI/180,false)
	 	 cxt.arc(200,200,10*(1+0.85*i),-45*Math.PI/180,45*Math.PI/180,false)
	 	 	// 绘制已定义的路径
	 	 cxt.stroke()
		 cxt.closePath()

		 cxt.beginPath()
	  	cxt.arc(200,200,10*(1+0.85*i),-135*Math.PI/180,135*Math.PI/180,true)
		 cxt.stroke()
		 cxt.closePath()
	}


	</script>
</body>
</html>