使半圆更椭圆

Question

这是我的jsfiddle：

http://jsfiddle.net/c4upM/103/

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

我试图让它们更像Elliptic，比如：

我没有成功。

我读了这个：http://jsbin.com/ovuret/2/edit并尝试在我的jsfiddle上制作但是我没有成功，因为arc-s被绘制为：DrawCircle和DrawEllipseForProjection的功能。 有两个功能：blueArc和grayarc。在radian angle中，函数circleInArc中有一个计算，它将小光蓝色圆圈和小灰色圆圈（当您将鼠标悬停在画布上时）放置在圆弧中。

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

这些是蓝色和灰色的圆弧：

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
    });
}

任何帮助表示赞赏！

Answer 1

您可以尝试绘制更大半径的弧，而不是从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);

希望它会有所帮助

Answer 2

我已经摆弄了一下，你可能需要调整一些值，但这是一个例子：Fiddle（只调整了灰弧）

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

此外，我在缩放之前将画布的原点转换为圆弧的中心，因为它们随着缩放而变得松散。然后弧的中心是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 to 2*PI似乎没有问题。 ：）

对于将来的问题，请尝试提取问题的更基本示例，以便让那些想要帮助的人更轻松。 ：）