canvas如何去画一个饼图

<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>	

猜你喜欢

转载自blog.csdn.net/weixin_43853424/article/details/88024800