AndroidShape 扇形绘制指南

什么是扇形？

扇形是由圆心角及其所对的弧围成的图形。在 Android 开发或 Web 前端中，常用于图表（如饼图）、进度指示器、自定义控件等场景。

Web 中使用 Canvas 绘制扇形

HTML5 的 <canvas> 元素配合 JavaScript 可以轻松绘制扇形。核心是使用 arc() 方法结合路径操作。

JavaScript 实现代码

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 的对比

在 Android 中，可通过 Canvas.drawArc() 方法绘制扇形，需传入 RectF 区域、起始角度、扫过角度及是否使用中心点（useCenter）。Web 与 Android 的逻辑高度相似，便于跨平台理解。

应用场景

• 数据可视化（饼图、环形图）
• 圆形进度条
• 游戏中的技能冷却指示
• 自定义 Loading 动画