canvas画一个环形占比图

以下是使用Canvas绘制环形占比图的示例代码：

HTML:

<canvas id="myCanvas" width="200" height="200"></canvas>

JavaScript:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 80;
const startAngle = -0.5 * Math.PI;
const endAngle = 1.5 * Math.PI;

// 绘制背景圆环
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.lineWidth = 10;
ctx.strokeStyle = '#ddd';
ctx.stroke();

// 绘制进度圆环
const percent = 0.7; // 进度百分比
const progressEndAngle = startAngle + percent * 2 * Math.PI;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, progressEndAngle);
ctx.lineWidth = 10;
ctx.strokeStyle = '#007bff';
ctx.stroke();

// 绘制圆环中心的文本
ctx.fillStyle = '#333';
ctx.font = 'bold 24px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(`${percent * 100}%`, centerX, centerY);

运行上面的代码，就可以绘制一个占比为70%的环形图了。可以根据需要修改圆环的颜色、宽度、半径、进度百分比等参数。