canvas如何去画一个饼图

最新推荐文章于 2022-08-14 20:01:30 发布

蔡大毛

最新推荐文章于 2022-08-14 20:01:30 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43853424/article/details/88024800

本文详细介绍了一种利用HTML5 Canvas API实现彩色扇形绘制的方法。通过定义一系列带有不同颜色和弧度的圆弧，实现了从蓝色到绿色渐变的扇形图案。此教程适合希望了解Canvas基本绘图功能及如何运用JavaScript控制画布上下文的初学者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<canvas id="shan" width="800"  height="600" >
			对不起，你的浏览器不支持canvas
		</canvas>
		<script>
			var c1 = document.getElementById('shan');
			var can3 = c1.getContext('2d');
			let yuan=[
				{
					fs:0.8,
					ys:"blue"
				},
				{
					fs:0.2,
					ys:"red"
				},
				{
					fs:0.4,
					ys:"gray"
				},
				{
					fs:0.6,
					ys:"green"
				}
			];
	
			function huayuan() {
				j=0.5;
				for (let i=0;i<yuan.length;i++){
					console.log(1);
					can3.beginPath();
					can3.moveTo(250,150);
					can3.arc(250,150,140,Math.PI*j,Math.PI*(j+yuan[i].fs));
					can3.fillStyle=yuan[i].ys;
					can3.strokeStyle=yuan[i].ys;
					can3.fill();
					can3.stroke();
					can3.closePath();
					j=j+yuan[i].fs;
				}
			}
			huayuan()	；
		</script>