文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5 -渲染椭圆弧的最佳方法

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

Stack Overflow用户

提问于 2010-09-21 22:18:52

回答 1查看 635关注 0票数 1

我使用HTML5呈现每个部分的椭圆饼图；使用一条路径，从中心开始，向外到边缘，穿过它的弧线，然后回到中心，然后填充。

如果它们是完美的圆形，我可以使用圆弧或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;
}

谁能告诉我做这件事最有效的方法？

canvas

drawing

html

math

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-09-21 23:33:30

最简单的方法是只将变换应用于整个地块。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3761231

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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