在HTML5画布上绘制一个拉伸的弧形

Question

我知道如何在HTML5画布上绘制部分圆形(arc)，但是如何绘制一个拉伸的弧形呢？

如下图所示，我该如何绘制这样的弧形（其中弧形被拉伸/半径改变）？ 这是我绘制普通弧形的方式，也许有一个函数可以拉伸这个弧形？

context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);       
context.closePath();

- sazr

Answer 1

这是您想要的：<canvas> 中的 scale()。

ctx.save();
ctx.scale(1,0.75);
//Do your arc here
ctx.restore();

//Viola!

示例: https://developer.mozilla.org/samples/canvas-tutorial/5_4_canvas_scale.html

这是一个关于HTML画布进行缩放的示例，可以通过代码中的scale方法实现。在缩放之前需要指定画布的原点，即缩放的基准点。示例中还演示了如何使用translate方法对画布进行移动。

- Derek 朕會功夫

Answer 2

你可以使用变换效果，就像这个在线演示中的例子一样。

context.save() ;
context.translate(150,150) ;
context.scale(2,1) ;
context.translate(-150,-150) ;
context.moveTo(150, 150);
context.arc(150, 150, 50, 0, 3*Math.PI/4, true);       
context.closePath();
context.stroke() ;
context.restore() ;
​

- brainjam