当前位置：首页 > JavaScript

js实现扇形

2026-03-14 10:11:22JavaScript

使用Canvas绘制扇形

在HTML5中，Canvas API可以轻松绘制扇形。以下是一个基本实现示例：

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

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();
}

// 示例：绘制一个90度的红色扇形
drawSector(ctx, 100, 100, 50, 0, Math.PI/2, 'red');

使用SVG创建扇形

SVG是另一种创建扇形的有效方式，特别适合矢量图形：

<svg width="200" height="200">
    <path d="M100,100 L100,50 A50,50 0 0,1 150,100 Z" fill="blue"/>
</svg>

数学计算扇形路径：

起点(M)：圆心(100,100)
直线(L)到起始角度点
圆弧(A)绘制到结束角度点
闭合路径(Z)

使用CSS实现扇形

纯CSS可以通过border-radius和transform属性模拟扇形效果：

<div class="sector"></div>

<style>
.sector {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    border-radius: 50%;
    transform: rotate(45deg);
}
</style>

动态角度计算

对于需要动态计算角度的场景，可以使用以下公式：

给定角度θ（弧度制）：

起点坐标：x + radius cos(startAngle), y + radius sin(startAngle)
终点坐标：x + radius cos(endAngle), y + radius sin(endAngle)

function degreesToRadians(degrees) {
    return degrees * Math.PI / 180;
}

动画实现

为扇形添加动画效果（以Canvas为例）：

js实现扇形

let currentAngle = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSector(ctx, 100, 100, 50, 0, currentAngle, 'purple');
    currentAngle += 0.01;
    if(currentAngle > Math.PI*2) currentAngle = 0;
    requestAnimationFrame(animate);
}
animate();

这些方法可以根据具体需求选择使用，Canvas适合复杂绘图，SVG适合可缩放图形，CSS适合简单静态效果。