canvas画饼图

☀️ 在react项目中，我们来画一个饼图

import React, { useEffect, useRef } from 'react';

function CanvasImg() {
	const canvasEl = useRef(null); // 访问dom元素
	const angle = Math.PI * 2;
	const startAngle = -Math.PI * 0.5 // 设置初始化角度
	const anticlockwise = false // 是否从逆时针方向开始画线
	
	useEffect(()=>{
		const ctx = canvasEl.current.getContext('2d'); // 平面绘制
		const { width, height } = canvasEl.current;
		const radius = Math.min(width, height) * 0.5 // 半径大小
		
		ctx.save(); //保存初始Canvas状态
		ctx.translate(width / 2, height / 2);

		// 第一个图形
		ctx.beginPath(); // 开始一个新路径
		ctx.moveTo(0, 0); // 路径绘制的起始点
		/**
		* context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
		* x x轴
		* y y轴
		* radius 半径
		* startAngle 开始角度
		* endAngle  结束角度
		* anticlockwise(可选) 是否从逆时针方向画
		*/
		ctx.arc(0, 0, radius, startAngle, angle * 0.3 + startAngle, anticlockwise);
		ctx.closePath(); // 关闭路径
		ctx.fillStyle = 'blue'; // 填充颜色
		ctx.fill(); // 填充路径
		
		// 第二个图形
		ctx.beginPath();
      	ctx.moveTo(0, 0);
      	ctx.arc(0, 0, radius, angle * 0.3 + startAngle, angle + startAngle, anticlockwise);
      	ctx.closePath()
      	ctx.fillStyle = 'yellow'
      	ctx.fill();

		ctx.restore(); // 储存状态
	}, [])
	
	return <canvas ref={canvasEl} width='150' height='150'></canvas>
}

简单的饼图就画好了🌻,具体的canvas配置就需要去canvas官网自己看啦🐾🐾🐾🐾🐾
https://www.canvasapi.cn/CanvasRenderingContext2D/canvas