js实现扇形

实现扇形的方法

在JavaScript中，可以通过Canvas API或SVG来绘制扇形。以下是两种常见的方法：

使用Canvas绘制扇形

Canvas提供了arc方法，结合beginPath和fill可以绘制扇形。

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

function drawSector(ctx, x, y, radius, startAngle, endAngle, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x, y, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fill();
}

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

使用SVG绘制扇形

SVG可以通过path元素结合圆弧命令绘制扇形。

function createSector(cx, cy, radius, startAngle, endAngle, color) {
    const startX = cx + radius * Math.cos(startAngle);
    const startY = cy + radius * Math.sin(startAngle);
    const endX = cx + radius * Math.cos(endAngle);
    const endY = cy + radius * Math.sin(endAngle);

    const largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1;

    const pathData = `M ${cx} ${cy} L ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} Z`;

    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", pathData);
    path.setAttribute("fill", color);
    svg.appendChild(path);

    return svg;
}

// 示例：创建一个从0到Math.PI/2的蓝色扇形
const sector = createSector(100, 100, 50, 0, Math.PI / 2, 'blue');
document.body.appendChild(sector);

参数说明

• x或cx：扇形圆心的X坐标。
• y或cy：扇形圆心的Y坐标。
• radius：扇形的半径。
• startAngle：扇形的起始角度（弧度）。
• endAngle：扇形的结束角度（弧度）。
• color：扇形的填充颜色。

注意事项

• 角度单位为弧度，不是度数。如需使用度数，需转换为弧度：

  const radians = degrees * Math.PI / 180;

• Canvas的arc方法默认按顺时针方向绘制。如需逆时针，可设置anticlockwise参数为true。
• SVG的path命令中，A表示椭圆弧，参数依次为：半径X、半径Y、旋转角度、大弧标志、方向标志、终点X、终点Y。