HTML5 canvas实现圆型图表

最新推荐文章于 2024-05-15 23:30:20 发布

Masa迟

最新推荐文章于 2024-05-15 23:30:20 发布

阅读量584

点赞数

本文链接：https://blog.csdn.net/weixin_42270942/article/details/82800944

版权

使用canvas制作三个圆弧拼接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: black;
			}
			canvas{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400"></canvas>
		<script>
			var ctx = document.getElementById("canvas")
			var oC = ctx.getContext("2d")
			
			oC.beginPath()
			oC.moveTo(100,100)
			oC.arc(100,100,60,-90*Math.PI/180,45*Math.PI/180);
			oC.closePath()
			oC.stroke()
			oC.fillStyle = "red"
			oC.fill()
			
			oC.beginPath()
			oC.moveTo(100,100)
			oC.arc(100,100,60,45*Math.PI/180,160*Math.PI/180);
			oC.closePath()
			oC.stroke()
			oC.fillStyle = "green"
			oC.fill()
			
			oC.beginPath()
			oC.moveTo(100,100)
			oC.arc(100,100,60,160*Math.PI/180,-90*Math.PI/180);
			oC.closePath()
			oC.stroke()
			oC.fillStyle = "blue"
			oC.fill()
		</script>
	</body>
</html>

效果如下

Masa迟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas实现圆型图表

使用canvas制作三个圆弧拼接&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body{ background: black; } canva
复制链接

扫一扫