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，可以保持狀態關於繪畫的組成部分，並允許您刪除或修改特定元素。