相同的电弧调用产生不同的尺寸

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

这个问题已经回答了，但我想提供一些更全面的解释。

当你在对角线上绘制时，你会经过像素的“部分”（在我的例子中显示）。那么浏览器对形状之外的像素部分做了什么？它使用抗锯齿（默认情况下，抗锯齿对于浏览器是开启的）为像素的其余部分着色（如果你没有抗锯齿，那么线看起来会呈锯齿状）。如果你注意到，红色的微弱痕迹不是鲜红色，因为它会因抗锯齿而变得混合。你看到它的原因是因为当你在画布上画出你的形状时，微弱的红色痕迹不是你形状的一部分，它是你形状外部像素的一部分。

现在如上所述，您可以调用clearRect来清除画布。但是，您应该阅读此SO question，因为它更详细地解释了事情（选择的答案不如第二个答案那么好）。还有，为什么他们称之为“画布”呢？想想艺术家使用的实际艺术画布，一旦他们在画布上画画，除非你得到一个新的画布或在它上面画画，否则无法取下它！

Answer 2

在画布上绘图时，它只保留stacking things on top of each other until you clear it。清除它的最简单方法是ctx.clearRect(0,0,width,height)

我把它放在你的drawWedge函数中：

http://jsfiddle.net/X7deh/1