在HTML5 Canvas上绘制拉伸弧

Question

我知道如何在HTML5 Canvas上绘制局部圆（弧），但如何在Canvas上绘制拉伸弧？

如何绘制下面的弧线（弧线被瞄准/半径变化）？

这是我画一个普通弧的方法，也许是一个可以伸展这个弧的函数？

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

Answer 1

这就是您想要的：scale()

中的<canvas>

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

//Viola!

DEMO：https://developer.mozilla.org/samples/canvas-tutorial/5_4_canvas_scale.html

Answer 2

您可以使用转换。与此live example一样。

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() ;
​