HTML5-呈现椭圆弧的最佳方式

HTML5-呈现椭圆弧的最佳方式,html,math,canvas,drawing,Html,Math,Canvas,Drawing,我使用HTML5呈现每个部分的椭圆饼图;使用从中心开始的路径,向外到边缘,穿过弧,然后返回到中心,然后填充 如果它们是完美的圆形,我可以使用圆弧或圆弧路径函数,但是因为它们是椭圆,外部曲线的半径总是可变的 正是这些外部曲线,我正试图找出如何绘制。我不知道二次曲线或贝塞尔曲线是否是答案,但它们可能是 无论如何,我发现唯一的方法是在边缘周围每0.1度渲染一条线,这会对每个点进行正弦和余弦计算,效率非常低。它看起来像这样(javascript): while(arcAng最简单的方法就是对整个批次进行

我使用HTML5呈现每个部分的椭圆饼图;使用从中心开始的路径,向外到边缘,穿过弧,然后返回到中心,然后填充

如果它们是完美的圆形,我可以使用圆弧或圆弧路径函数,但是因为它们是椭圆,外部曲线的半径总是可变的

正是这些外部曲线,我正试图找出如何绘制。我不知道二次曲线或贝塞尔曲线是否是答案,但它们可能是

无论如何,我发现唯一的方法是在边缘周围每0.1度渲染一条线,这会对每个点进行正弦和余弦计算,效率非常低。它看起来像这样(javascript):


while(arcAng最简单的方法就是对整个批次进行变换


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

本质上相同的可能的复制品是的,但在两点之间只有一个椭圆的弧段。椭圆曲线是完全不同的东西,在公钥密码中有应用。
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;
}