HTML5 - 渲染椭圆弧的最佳方式答案

【问题标题】：HTML5 - best way to render an elliptic arcHTML5 - 渲染椭圆弧的最佳方式
【发布时间】：2011-04-15 05:51:26
【问题描述】：

我正在使用 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;
}

谁能告诉我最有效的方法？

【问题讨论】：

How to draw an oval in html5 canvas?的可能重复
基本上是一样的，但是两点之间只有一个椭圆的弧段。
椭圆曲线是完全不同的东西，在公钥密码学中有应用。

标签： html math canvas drawing

【解决方案1】：

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

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

【讨论】：