javascript - 对 arc 的相同调用会产生不同的大小

Question

我试图弄清楚为什么绘制一个形状，然后用新的颜色绘制它(好像要突出显示它)，然后重新绘制原始形状(取消突出显示它)会留下突出显示的痕迹颜色。

我已在 this fiddle 中重现了该问题。楔子以浅蓝色绘制。有一个红色按钮会在其上绘制红色，然后另一个按钮会重新绘制原始形状。所有参数都相同(除了颜色)，但单击按钮重置颜色后，楔形上有微弱的红色痕迹。

之前:

之后:

相关代码如下:

drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");

$("#red").click(function () {
    drawWedge(250, 250, 200, 0, 18, "rgb(255, 0, 0)");
});

$("#back").click(function () {
    drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");
});

function d2r(degrees) {
    return degrees * (Math.PI / 180.0);
}

function drawWedge(centerX, centerY, r, start, end, color) {
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.arc(centerX, centerY, r, d2r(start), d2r(end), false);
    context.closePath();
    context.fillStyle = color;
    context.fill();
}

Answer 1

这个问题已经有了答案，但我想给出更彻底的解释。

当您沿对 Angular 线绘制时，您会穿过像素的“部分”(在我的示例中显示)。那么浏览器对形状之外的像素部分做了什么？它使用抗锯齿功能(浏览器默认情况下始终启用抗锯齿功能)来为像素的其余部分着色(如果没有抗锯齿功能，则线条看起来会呈锯齿状)。如果您注意到的话，微弱的红色痕迹并不是鲜红色，因为它因抗锯齿而混合。您之所以看到它，是因为当您在 Canvas 上绘制形状时，微弱的红色痕迹不是形状的一部分，而是形状外部像素的一部分。

现在正如答案所提到的，您可以调用 clearRect 来清除 Canvas 。但是，您应该阅读此SO question因为它更详细地解释了事情(所选答案不如第二个答案)。另外，有没有想过为什么他们称其为“ Canvas ”？想象一下艺术家使用的实际艺术 Canvas ，一旦他们在 Canvas 上绘画，就无法将其取下，除非您获得新的 Canvas 或在其上绘画!