Javascript 使半圆更椭圆

这是我的JSFIDLE：

我有灰色弧和蓝色/绿色弧

我试图让它们更椭圆，比如：

我没有成功

我读了这篇文章：并试图在我的JSFIDLE上实现它，但没有成功，因为arc-s是在以下函数中绘制的：

DrawCircle

和

drawerlipseforprojection

。 有两个功能：

blueArc

和

grayarc

。通过

弧度角

，在函数

CircleInac

中有一个计算，将浅蓝色小圆圈和灰色小圆圈（当鼠标悬停在画布上时）放置在弧形s中

我希望这些功能在更改后工作，但我没有成功

这些是蓝色和灰色arc-s：

function grayArc(strokeColor, cx, cy, radius, ctx, linewidth) {
    ctx.beginPath();
    ctx.arc(cx, cy, radius, Math.PI, Math.PI * 2);
    ctx.lineWidth = linewidth;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
}

function blueArc(strokeColor, radianStart, radianEnd, cx, cy, radius, ctx, linewidth) {
    ctx.beginPath();
    ctx.arc(cx, cy, radius, radianStart, radianEnd);
    ctx.lineWidth = linewidth;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
}

这是

circleInArc

函数：

function circleInArc(fillColor, radianAngle, cx, cy, radius, ctx, linewidth) {
    var x = cx + radius * Math.cos(radianAngle);
    var y = cy + radius * Math.sin(radianAngle);
    ctx.beginPath();
    ctx.arc(x, y, linewidth / 2, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = fillColor;
    ctx.fill();
    return ({
        x: x,
        y: y,
        radius: linewidth / 2
    });
}

---

感谢您的帮助

您可以尝试绘制半径更大的圆弧，而不是从Math.PI到2*Math.PI，而是这个

ctx.arc(cx, cy, radius, Math.PI*5/4, Math.PI * 7/4);

不要忘了将圆弧向下移动以获得半径大小

grayArc("rgb(177,177,177)", cx, cy+radius, radius*2, ctx, linewidth);

---

希望它能有所帮助

我已经做了一些修改，您可能需要调整一些值，但这里有一个例子：（只调整了灰色弧）

基本策略是保存上下文的状态，然后根据自己的喜好进行缩放。如果只缩放一个轴。。瞧，省略号

此外，在缩放之前，我将画布的原点转换为弧的中心，因为它们会随着缩放而改变。然后，弧的中心是

0，0

在这之后，可以恢复上下文，就像什么都没有发生过一样，您可以绘制转换的弧

ctx.save();
ctx.translate(cx,cy);
ctx.scale(1.3, 1);
ctx.arc(0, 0, radius, 1.2*Math.PI, 1.8*Math.PI);
ctx.restore();

你很可能会想利用半径、缩放比例以及可能绘制圆弧的范围来满足你的需要

编辑：我缩小了绘制的弧的范围，以防止省略号的短端显示。从

1.2*PI

到

1.8*PI

而不是

1*PI到2*PI

在当前情况下看起来很正常。：）

对于未来的问题，请尝试提取您的问题的更基本的示例，以便于那些想要帮助的人