在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