Question

我正在使用HTML 5来渲染每个部分的椭圆饼图;使用从中心开始，到边缘，穿过它的弧并返回到中心然后填充的路径。

如果它们是完美的圆形，我可以使用arc或arcTo路径函数，但因为它们是椭圆形的，所以外部曲线将始终具有可变半径。

正是这些外部曲线我试图弄清楚如何绘制。我不能破解数学足以知道二次曲线或贝塞尔曲线是否是答案，但它们可能是。

无论如何，我发现这样做的唯一方法就是在边缘每0.1度渲染一条线，这样每个点进行正弦和余弦计算，效率非常低。看起来像这样（javascript）：

while (arcAng <= curAng + dTheta) {
    this.parent2d.lineTo(this.left + (this.width / 2) + (this.width / 2) * Math.cos(arcAng * (Math.PI / 180)),
    this.top + (this.height / 2) + (this.height / 2) * Math.sin(arcAng * (Math.PI / 180)));
    arcAng += 0.1;
}

有人能告诉我最有效的方法吗？

Answer 1

最简单的方法就是将变换应用到整个批次。

我只使用x position和width属性来渲染圆（就好像它在一个完美的正方形内），然后应用x，y缩放（1，高度/宽度）。

HTML5 - 渲染椭圆弧的最佳方法

1 个答案: