当前位置：首页 > JavaScript

js实现扇形

2026-04-06 04:13:28JavaScript

使用Canvas绘制扇形

在HTML5 Canvas中，可以通过arc()方法绘制扇形。以下是一个完整的示例代码：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 定义圆心和半径
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = 80;

  // 开始绘制
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);  // 移动到圆心
  ctx.arc(centerX, centerY, radius, 0, Math.PI / 2);  // 绘制90度扇形
  ctx.closePath();  // 闭合路径

  // 设置样式
  ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.fill();
</script>

使用SVG绘制扇形

SVG提供了更简单的矢量图形绘制方式：

js实现扇形

<svg width="200" height="200">
  <path d="M100,100 L180,100 A80,80 0 0,1 100,180 Z" fill="blue" />
</svg>

解释SVG路径命令：

M100,100：移动到圆心(100,100)
L180,100：画线到起始点(180,100)
A80,80 0 0,1 100,180：绘制圆弧到(100,180)
Z：闭合路径

使用CSS绘制扇形

纯CSS可以通过边框和旋转实现扇形效果：

js实现扇形

<div class="fan"></div>
<style>
  .fan {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top: 100px solid red;
    border-radius: 100px;
    transform: rotate(45deg);
  }
</style>

动态生成扇形

以下函数可以生成任意角度和半径的扇形：

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.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
drawSector(ctx, 100, 100, 80, 0, Math.PI/3, 'green');

动画扇形效果

结合requestAnimationFrame实现动画效果：

let angle = 0;
function animate() {
  const ctx = document.getElementById('canvas').getContext('2d');
  ctx.clearRect(0, 0, 200, 200);

  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.arc(100, 100, 80, 0, angle);
  ctx.closePath();
  ctx.fillStyle = 'orange';
  ctx.fill();

  angle += 0.01;
  if(angle < Math.PI*2) {
    requestAnimationFrame(animate);
  }
}
animate();