Javascript 对产生不同尺寸的arc的相同调用

我试图弄清楚为什么画一个形状，然后用一种新的颜色在上面画（好像要高亮显示），然后重新画原始形状（不高亮显示）会留下高亮显示颜色的痕迹

我已经把这个问题转载到了。楔体以浅蓝色绘制。有一个红色的按钮会在上面画成红色，然后另一个按钮会重新画出原始形状。所有参数都是相同的（除了颜色），但在单击按钮重置颜色后，楔块上有一条微弱的红色痕迹

之前：

之后：

以下是相关代码：

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

---

在画布上绘制时，它只是保持不变。最简单的清除方法是

ctx.clearRect（0,0，宽度，高度）

我把它放在了drawWedge函数中：

---

在画布上绘图时，它只是保持不变。最简单的清除方法是

ctx.clearRect（0,0，宽度，高度）

我把它放在了drawWedge函数中：

---

这个问题已经得到了回答，但我想给出更详细的解释

当你画对角线时，你通过像素的“部分”（如我的例子所示）。那么浏览器对形状外的像素部分做了什么呢？它使用抗锯齿（浏览器默认情况下，抗锯齿始终处于启用状态）为像素的其余部分着色（如果没有抗锯齿，线条看起来会参差不齐）。如果您注意到，微弱的红色痕迹不是亮红色，因为它由于抗锯齿而混合。你看到它的原因是因为当你在画布上画你的形状时，微弱的红色痕迹不是你形状的一部分，而是你形状外部像素的一部分

---

现在，正如前面提到的答案，您可以调用

clearRect

来清除画布。但是，您应该阅读本文，因为它更详细地解释了事情（所选答案不如第二个答案好）。还有，有没有想过为什么他们称之为“画布”？想象一下艺术家们使用的一幅真正的艺术画布，一旦他们在画布上作画，除非你得到一幅新画布或在画布上作画，否则就没有办法把它取下来

这个问题已经得到了回答，但我想给出更详细的解释

当你画对角线时，你通过像素的“部分”（如我的例子所示）。那么浏览器对形状外的像素部分做了什么呢？它使用抗锯齿（浏览器默认情况下，抗锯齿始终处于启用状态）为像素的其余部分着色（如果没有抗锯齿，线条看起来会参差不齐）。如果您注意到，微弱的红色痕迹不是亮红色，因为它由于抗锯齿而混合。你看到它的原因是因为当你在画布上画你的形状时，微弱的红色痕迹不是你形状的一部分，而是你形状外部像素的一部分

---

现在，正如前面提到的答案，您可以调用

clearRect

来清除画布。但是，您应该阅读本文，因为它更详细地解释了事情（所选答案不如第二个答案好）。还有，有没有想过为什么他们称之为“画布”？想象一下艺术家们使用的一幅真正的艺术画布，一旦他们在画布上作画，除非你得到一幅新画布或在画布上作画，否则就没有办法把它取下来

在绘制新框架之前，是否故意不清除画布？如果不是，那么解决办法很简单：@Esailija-只是学习画布，所以我没有刻意做任何事情。扔掉它——这是正确的答案。@Esailija——我只是查了一下这个方法，它似乎做了它的名字所暗示的事情。我真的不能清除这个楔子周围的矩形，因为它旁边还有很多其他的。（为了好玩，我正在做一个饼图）。没有clearArc方法，那么您会推荐什么呢？您是否有意在绘制新框架之前不清除画布？如果不是，那么解决办法很简单：@Esailija-只是学习画布，所以我没有刻意做任何事情。扔掉它——这是正确的答案。@Esailija——我只是查了一下这个方法，它似乎做了它的名字所暗示的事情。我真的不能清除这个楔子周围的矩形，因为它旁边还有很多其他的。（为了好玩，我正在做一个饼图）。这里没有clearArc方法，所以你会推荐什么呢？请看我上面的评论。因此，如果我正在制作一个饼图，你会建议我清除整个图表，然后重新绘制，以便突出显示/不显示楔块吗？这似乎很难efficient@AdamRackis你是对的，这是没有效率的。你迟早要清理画布，画一个新的框架。要突出显示，您需要使用不同颜色的突出显示的楔块重新绘制整个饼图。不过，如果这有帮助的话，我从来没有遇到过任何性能问题。每次重新绘制实际上会使我的代码更加清晰，所以我会继续这样做，但出于好奇，您知道为什么这个示例不起作用吗？这些弧的大小不应该相同吗？@AdamRackis很好，楔形在边缘上很复杂，它不是一种纯色，而是模拟的部分像素，因此当你在旧的部分像素上绘制时，你会在边缘上得到这种效果，因为部分像素不断堆积。这与我上面的评论有关。因此，如果我正在制作一个饼图，你会建议我清除整个图表，然后重新绘制，以便突出显示/不显示楔块吗？这似乎很难efficient@AdamRackis你是对的，这是没有效率的。你迟早要清理画布，画一个新的框架。要突出显示，您需要使用不同颜色的突出显示的楔块重新绘制整个饼图。不过，如果这有帮助的话，我从来没有遇到过任何性能问题。每次重新绘制实际上会使我的代码更加清晰，所以我会继续这样做，但出于好奇，您知道为什么这个示例不起作用吗？“这些弧的大小不应该是一样的吗？”AdamRackis很好，楔形物的边缘很复杂，它不是一个实体