我知道如何在 HTML5 Canvas 上绘制部分圆(弧),但如何在 Canvas 上绘制拉伸弧?
如何绘制像下面这样的弧(弧被拉伸/半径变化的地方)?
这就是我绘制普通弧线的方式,也许有一个可以拉伸这条弧线的功能?
context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
context.closePath();
我知道如何在 HTML5 Canvas 上绘制部分圆(弧),但如何在 Canvas 上绘制拉伸弧?
如何绘制像下面这样的弧(弧被拉伸/半径变化的地方)?
这就是我绘制普通弧线的方式,也许有一个可以拉伸这条弧线的功能?
context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
context.closePath();
您可以使用变换。就像在这个活生生的例子中一样。
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() ;
这就是你想要的:scale()
在<canvas>
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