从原理到实践,掌握扇形图形的绘制方法
扇形是由圆心角及其所对的弧围成的图形。在 Android 开发或 Web 前端中,常用于图表(如饼图)、进度指示器、自定义控件等场景。
HTML5 的 <canvas> 元素配合 JavaScript 可以轻松绘制扇形。核心是使用 arc() 方法结合路径操作。
function drawSector(ctx, x, y, radius, startAngle, endAngle, color) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
const canvas = document.getElementById('fanCanvas');
const ctx = canvas.getContext('2d');
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制多个扇形(模拟饼图)
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
const angles = [0.3, 0.2, 0.25, 0.25]; // 比例
let start = 0;
for (let i = 0; i < angles.length; i++) {
const end = start + angles[i] * 2 * Math.PI;
drawSector(ctx, 150, 150, 100, start, end, colors[i]);
start = end;
}
在 Android 中,可通过 Canvas.drawArc() 方法绘制扇形,需传入 RectF 区域、起始角度、扫过角度及是否使用中心点(useCenter)。Web 与 Android 的逻辑高度相似,便于跨平台理解。