javascript - 清除分层画布文本

Question

我有一个关于我正在试验的分层画布元素的问题。

如果我有两个画布，一个 (c1) z-index 1 和第二个 (c2) z-index 2，在顶部分层，将文本写入 c2 并清除它的最佳方法是什么？到目前为止，我已经尝试了几种方法，但似乎没有一个是完美的。

1. 当我尝试简单地用背景颜色覆盖文本时，我的文本会留下轻微的轮廓，就好像我的 Photoshop 工作做得很糟糕！

2. 如果我尝试在具有背景颜色的 c2 画布上使用 clearRect() ，它显然会使 c2 画布背景变得纯色并遮盖 c1 画布的一部分。

3. 如果我尝试在 c1 画布上绘制文本并使用 clearRext，当精灵移动到该区域后面时，它会闪烁，因为在重绘之前将精灵区域设置为背景区域。

对这里的明智方法有任何想法吗？

Answer 1

我正要发帖，只是做 clearRect()，但后来我记得你有一个问题。您能否发布您的代码，以便我们更好地了解正在发生的事情？

上下文中的 clearRect 函数将该区域中的数据设置为 0。因此，我对它如何使您的背景变得坚实感到困惑。

ctx2.clearRect(0,0,100,100);
// this should just clear the canvas2

这是我的意思的一个jsfiddle。