svg绘制图像

最新推荐文章于 2023-08-09 23:27:36 发布

Yhaomin

最新推荐文章于 2023-08-09 23:27:36 发布

阅读量117

点赞数 3

分类专栏： h5 文章标签： svg html5

本文链接：https://blog.csdn.net/weixin_50993428/article/details/115551824

版权

h5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述 canvas{ background: #eeeeee; display: block; margin: 0 auto; }

<canvas id="" width="932" height="808" class="rotate"></canvas>
		<script type="text/javascript">
			var cav=document.getElementsByClassName("rotate")[0];
			var cgt=cav.getContext("2d");
			//正方形
			cgt.save();
			cgt.beginPath();
			cgt.translate(466,404);
			cgt.fillStyle="#9cc18b";
			cgt.fillRect(-138,-138,276,276);
			cgt.closePath();
			cgt.restore();
			//圆
			cgt.save();
			cgt.beginPath();
			cgt.lineWidth=3;
			cgt.translate(466,404);
			cgt.fillStyle="#3f473a";
			cgt.arc(-46,-48,28,0,360,false);
			cgt.fill();
			cgt.closePath();
			cgt.restore();
			
			cgt.save();
			cgt.beginPath();
			cgt.lineWidth=3;
			cgt.translate(466,404);
			cgt.fillStyle="#3f473a";
			cgt.arc(46,-48,28,0,360,false);
			cgt.fill();
			cgt.closePath();
			cgt.restore();
			//三角
			for(var i=0;i<4;i++){
				cgt.save();
				cgt.beginPath();
				cgt.lineWidth=3;
				cgt.translate(466,404);
				cgt.rotate(Math.PI/2*i);
				cgt.fillStyle="#add599";
				cgt.moveTo(-138,-138);
				cgt.lineTo(0,-376);
				cgt.lineTo(138,-138);
				cgt.lineTo(-138,-138);
				cgt.fill();
				cgt.closePath();
				cgt.restore();
			}
			//矩形
			cgt.save();
			cgt.beginPath();
			cgt.translate(466,404);
			cgt.fillStyle="#3f473a";
			cgt.fillRect(-33,30,66,26);
			cgt.closePath();
			cgt.restore();	
			
			var a="123";
			console.log(typeof a);
			console.log(a);
		</script>