javascript - 如何使用弧法创建自定义圆？

Question

我想自定义 arc() 函数来制作我自己的圆，但我无法让它绘制一个扁平的圆。

我该怎么做？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"></canvas>

Answer 1

弧永远是圆的一部分。使用 scale 将圆圈变成椭圆:

编辑:使用保存和恢复来保持 Canvas 状态。这将使线宽保持不变。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth=5;
ctx.save();
ctx.beginPath();
ctx.scale(2,1);
ctx.arc(50, 75, 40, 0, 2*Math.PI);
ctx.restore();
ctx.stroke();

<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"></canvas>