当上下文转换为中心时，沿画布弧的渐变笔划消失

Question

我对画布图很新。我试图沿着圆弧应用渐变。当我从上下文坐标绘制具有中心偏移的圆弧时，我可以使它看起来很好。让我们说centerX和centerY表示画布的中心。我可以使用context.arc(centerX, centerY, radius, ......)获得渐变弧。

Working example: http://jsfiddle.net/m5Pmb/

但是当我尝试在上下文坐标周围绘制弧时，渐变消失。例如，我采用上面的工作jsfiddle示例，执行context.translate(centerX, centerY)，然后执行context.arc(0,0,radius,......)，生成的弧上没有任何渐变。

Example here: http://jsfiddle.net/N6NMB/

在我的情况下，我需要使用context.rotate（）围绕其轴旋转生成的圆，所以我必须转换到中心并在（0,0）周围绘制圆。但我不明白为什么当试图围绕上下文（0,0）点绘制弧时梯度会消失。任何见解都会非常有用。

Answer 1

由于您正在翻译上下文centerX而centerY不在您认为的位置。

当你翻译上下文时，你说你希望x和y成为新的0,0。所以现在你的0,0位于画布的中心，所以centerX和centerY会被它们自己偏离中心而偏移。

您可以使用的一种方法是以下

var grad = context.createLinearGradient(
    -radius,
    radius / 2,
    radius,
    radius / 2
);

<强> live Demo

上述方法之所以有效，是因为在之后调用来翻译上下文，所以centerX和centerY（就像我之前说的那样）是0,0意味着他们不会这样做。需要在该函数中引用。

Answer 2

您创建的渐变将使用实际的变换进行绘制。

因此，如果您没有使用任何变换，则无需怀疑任何事情：定义您要绘制的渐变，并且您将会很好。

如果使用变换，则必须将渐变的坐标视为相对于点/角度/比例的坐标。

为了进一步解释，我修改了你的例子，并使用了径​​向渐变 我创建了一个标准化的渐变：它定义在0.0到1.0半径之间，意味着它的x和y在[-1; 1]。

var eyeGrad = context.createRadialGradient(0, 0, 0, 0, 0, 1.0);

然后使用渐变我必须：
1）翻译成我要画的人物的中心。
2）缩放以具有标准化坐标。

function drawEye(x, y, r) {
    context.save();
    //translate context to center
    context.translate(x, y);
    // scale to radius
    context.scale(r, r);
    context.beginPath();
    // draw an arc with radius of 1
    context.arc(0, 0, 1, 0, 2 * Math.PI, false);
    context.fillStyle = eyeGrad;
    context.fill();
    context.restore();
}

小提琴在这里：

   http://jsfiddle.net/gamealchemist/N6NMB/3/

结果：

drawEye(100, 100, 40);
drawEye(250, 120, 20);