缩放canvas.arc以具有不同的x和y半径

Question

我正在尝试为CanvasRenderingContext2D创建一个弧形函数，该函数将允许用户指定水平和垂直半径(x和y半径(。这就是我目前所拥有的：

function arc(x, y, w, h, start, stop) {
ctx.save();
ctx.translate(x, y);
if (w !== h) {
const m = w < h ? w : h;
if(m === w) {
ctx.scale(1, Math.min(w, h) / Math.max(w, h));
} else {
ctx.scale(Math.min(w, h) / Math.max(w, h), 1);
}
}
ctx.beginPath();
ctx.arc(0, 0, Math.min(w, h) / 2, start, stop);
ctx.restore();
ctx.fill();
ctx.stroke();
}

我希望圆弧的宽度和高度与函数参数指定的相同。

Answer 1

我找到了一个解决方案。很抱歉回答了我自己的问题。

function arc(x, y, w, h, start, stop) {
ctx.save();
ctx.translate(x, y);
if (w !== h) {
if(w > h) {
ctx.scale(Math.max(w, h) / Math.min(w, h), 1);
} else {
ctx.scale(1, Math.max(w, h) / Math.min(w, h));
}
}
ctx.beginPath();
ctx.arc(0, 0, Math.min(w, h) / 2, start, stop);
ctx.restore();
ctx.fill();
ctx.stroke();
}

本质上，我只是根据哪一边更大来改变我缩放的方向。

Answer 2

有一个ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)方法。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.fillStyle = "green";
arc(150, 80, 130, 80, Math.PI, Math.PI * 2.35);
function arc(x, y, w, h, start, stop) {
ctx.beginPath();
// We divide w and h by 2
// because OP's version didn't took them as radii.
ctx.ellipse(x, y, w/2, h/2, 0, start, stop);
ctx.fill();
ctx.stroke();
}

<canvas></canvas>