如何避免html5画布中的文本重叠

Question

我正在从用户那里获取文字并在画布上显示。同样，如果用户在同一位置输入另一个文本，则文本将重叠而不会被替换。我该如何解决这个问题？

Answer 1

使用clearRect并清除！

context.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

取决于你如何在画布上实际绘制场景。

您可以采取哪些措施来清除该文字：

• 如果要跟踪画布上绘制的元素（使用对象和数组），就像面向对象的画布框架一样，请删除跟踪文本的对象。在下一次重绘场景（或部分）时，文本将不会被绘制。

• 或者，为了快速简便地执行此操作，请在与背景匹配的文本上绘制一个矩形。它类似于将修正液放在纸上的墨水上。