javascript - html5 画布 - 更新文本

Question

这是我的项目：http: //jsfiddle.net/fknjz/17/

当我在画布下输入文本框并单击“更新”时，它会起作用并将文本添加到画布中。但是每次我单击更新时，它都会在之前输入的内容上添加文本框内容。所以画布中的文本开始相互堆叠。

我需要修改画布中的文本，以便当我单击更新时，它实际上会更新文本，而不是在旧文本上创建新的文本行。

知道怎么做吗？

Answer 1

请记住，画布只是一堆像素：当您调用 时fillText，画布看不到字符，它看到的是一组像素。此外，作为一个不同的组，该组像素会立即丢失——无法向画布询问“请删除我刚刚添加的那组特定像素”。

您的选择是：

• 使用clearRect擦除绘图的矩形部分。

• 用于canvas.width = canvas.width;重新初始化画布的像素状态。这需要您重新绘制整个画布，同时clearRect为您提供更高的精度。

对于未来的工作，您可能会考虑使用画布绘图库，该库可以维护绘图组件的状态并允许您删除或更改特定元素。

Answer 2

您可以像这样清除画布：

canvas.width = canvas.width;

请参阅更新的小提琴。请注意，由于画布已完全清除，因此每次都需要重新绘制图像。

或者，正如 apsillers 和 Joceyln 所建议的，使用clearRect画布的方法。但是，这将要求您计算要清除的矩形区域，该区域可能需要根据用户输入的文本量而有所不同，并且会删除您在背景中绘制的图像部分（可能不是如果它总是是白色背景，这是一个问题）。