Canvas API - 画一条线两次导致不同的颜色 - 填充文本两次导致“粗体”字体答案

【问题标题】：Canvas API - Draw a line twice leads to different color - Fill a text twice leads to "bold" fontCanvas API - 画一条线两次导致不同的颜色 - 填充文本两次导致“粗体”字体
【发布时间】：2021-10-09 06:27:24
【问题描述】：

我开发了一个 Web 应用程序，用户可以在其中移动对象……这意味着在 mouseMove 事件期间我必须重新绘制画布。为了有效地做到这一点，我只在发生变化的位置调用 clearRect()，例如在要移动的对象所在的旧对象位置和新对象位置。这很好用。

但我所经历的是，在这两个清除的矩形之外，在 mouseMove 期间发生了一些变化（恕我直言，在清除的矩形之外什么都不应该改变）。我深入研究它，它导致了一些我认为很奇怪的事情，但它发生在多个浏览器中，所以它似乎不是浏览器错误。

要画一条线，你可以这样做：

ctx.strokeStyle = 'rgba(74,12,95,1)';
ctx.lineWidth = 1;
const p1 = new Path2D();
p1.moveTo(posNumSummits, 0);
p1.lineTo(posNumSummits, this.CANVAS_TOP_PX - 2);
p1.lineTo(posNumSummits + numSummitsTextLen.width + textMargin + 10, this.CANVAS_TOP_PX - 2);
ctx.stroke(p1);

这很好用，并以正确的颜色绘制线条。但是当我再次重复相同的笔划时，线条会变成不同的颜色：

ctx.stroke(p1);
ctx.stroke(p1);

我确保 globalAlpha 为 1，并且使用的颜色不透明（如果颜色是透明的，我会理解行为）。

当我调用 fillText() 时也会发生同样的情况：

ctx.fillText(numSummitsText, posNumSummits + textMargin, this.CANVAS_TOP_PX - 18);

调用一次 fillText 效果很好，但调用两次如下：

ctx.fillText(numSummitsText, posNumSummits + textMargin, this.CANVAS_TOP_PX - 18);
ctx.fillText(numSummitsText, posNumSummits + textMargin, this.CANVAS_TOP_PX - 18);

明显导致相同的显示文本，但文本看起来很粗（就像在同一位置写了两次，但略有移动）。

现在的问题：

为什么画布中的相同绘画动作会导致不同的画布图像？
试图尽可能提高效率并仅在发生变化的情况下使用 clearRect() 是否浪费精力。我应该每次都清除整个画布吗？

感谢您的任何反馈。

【问题讨论】：

标签： javascript html css canvas

【解决方案1】：

这称为antialiasing。为了使不能完美落在像素边界上的线条绘制平滑，将向该像素添加透明度。在同一位置绘制两次会增加不透明度。
是的，仅清除一部分上下文在性能方面甚至可能是最差的，而且它肯定会使您的代码更清晰，以清除所有内容并重绘每一帧。

【讨论】：