html5 canvas - 更新文本

Question

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

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

我需要的是修改Canvas中的文本，这样当我点击UPDATE时，它实际上会更新文本，而不是在旧文本上创建一个新的文本文本行。

知道该怎么做吗？

Answer 1

请记住，画布只是一堆像素：当您调用fillText时，画布看不到字符，它会看到一组像素。此外，作为一个独特的组，这组像素会立即丢失 - 无法询问画布，＆＃34;请删除我刚刚添加的特定像素组。＆＃34;

您的选择是：

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

• 使用canvas.width = canvas.width;重新初始化画布的像素状态。这需要您重绘整个画布，而clearRect可以提供更高的精度。

对于将来的工作，您可以考虑使用canvas drawing library来保持关于绘图组件的状态，并允许您删除或更改特定元素。

Answer 2

您可以像这样清除画布：

canvas.width = canvas.width;

查看更新的fiddle。请注意，每次完全清除画布后，您需要重新绘制图像。

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