HTML5画布 - 更新文本

Question

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

当我在文本框画布下类型，然后单击“更新”，它的工作原理，并在画布上添加文字。但每次点击UPDATE时，它都会将文本框内容添加到之前输入的内容上。所以画布上的文字开始堆叠在一起。

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

任何想法如何做到这一点？

Answer 1

你可以清除画布，像这样：

canvas.width = canvas.width; 

查看更新后fiddle。请注意，自从画布完全清除后，您需要重新绘制图像。或者，如apsillers和Joceyln所建议的那样，使用画布的clearRect方法。但是，这需要您计算要清除的矩形区域，这可能需要根据用户输入的文本数量而有所不同，并会删除您在背景中绘制的图像部分（可能不是一个问题，如果它总是会是一个白色的背景）。

Answer 2

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

的选项有：

• 使用clearRect擦去绘图的矩形截面。使用canvas.width = canvas.width;重新初始化画布的像素状态。这要求您重新绘制整个画布，而clearRect则会提供更高的精度。

对于今后的工作中，你可能会考虑使用canvas drawing library，可以保持状态关于绘画的组成部分，并允许您删除或修改特定元素。