在HTML5 Canvas上绘制拉伸弧

Question

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

如何绘制如下所示的圆弧（圆弧加工/半径变化）？

这是我如何绘制一个正常的弧，也许是一个函数，可以拉伸这个弧？

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

Answer 1

您可以使用转换。正如在这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() ; 
​ 

Answer 2

这是你想要什么：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