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

Question

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

Answer 1

使用clearRect并清除！

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

Answer 2

取决于您在画布上实际绘制场景的方式。

您可以做些什么来清除该文本：

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

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