在 HTML5 Canvas 上绘制拉伸弧线答案

【问题标题】：Draw a Stretched Arc on HTML5 Canvas在 HTML5 Canvas 上绘制拉伸弧线
【发布时间】：2023-04-02 08:31:01
【问题描述】：

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

如何绘制如下图所示的弧线（弧线被拉伸/半径发生变化的位置）？

这就是我画一条普通弧线的方法，也许有一个函数可以拉伸这条弧线？

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

【问题讨论】：

标签： javascript html canvas

【解决方案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() ;

【讨论】：

【解决方案2】：

这就是你想要的：scale() in <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

【讨论】：