html5 canvas - 更新文本

Question

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

当我在画布下键入文本框并单击"更新"时,它可以工作并在画布中添加文本.但每次我点击UPDATE时,它都会在之前输入的内容上添加文本框内容.因此画布中的文本开始堆叠在一起.

我需要的是修改Canvas中的文本,这样当我单击UPDATE时,它实际上更新了文本,而不是在旧文本上创建新的文本文本行.

知道怎么做吗？

Answer 1

请记住,画布只是一堆像素:当你进行调用时fillText,画布看不到字符,它会看到一组像素.此外,作为一个独特的组,这组像素立即丢失 - 没有办法询问画布,"请删除我刚刚添加的特定像素集."

你的选择是:

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

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

对于将来的工作,您可以考虑使用画布绘图库,该库可以维护有关绘图组件的状态,并允许您删除或更改特定元素.