我目前在白色的畫布上有文本。我希望能夠從左向右緩慢平穩地用另一種顏色（紅色）填充文本。有沒有辦法做到這一點，所以有時一封信在一部分上是白色的，另一面是紅色的？如何在html5畫布上緩慢地填充文本
使用單詞「顏色」的示例。
「Col」是紅色的。下一個「o」有25％紅色（左）和75％白色（右）。 「r」是全白的。
更新
感謝所有幫助。我注意到，如果在剪輯對象之前添加ctx.beginPath（），它會更好。
我已經添加了一點點的想法，並創建了一個小的js對象，似乎很適合我當前的項目。它可能不是最優雅的js，但希望它可以幫助其他想要稍後做這件事的人。我注意到一個輕微的問題，當它開始填充時文本的大小發生了變化，不知道爲什麼。 http://jsfiddle.net/WRAFA/4/
您可以對複合操作源代碼進行此操作。如果您首先用複合操作源代碼繪製帶有背景顏色（白色）的文本，然後在其繪製的文本與矩形之間的唯一交集處使用soruce繪製彩色矩形。我在jsfiddle
做了一個小例子修理理查德的小提琴。我做了一些改進。
setInterval。您正在進行抽獎，直到永遠，永遠，永遠......我已經修復了小提琴使用setTimeout，以便在您到達畫布邊緣時立即停止繪畫事件。調整後小提琴是http://jsfiddle.net/d4Jef/1/
有一件事我會建議，雖然。您應該使用剪輯區域來撰寫文字，而不是使用合成。 source-in合成的問題是，如果您的文本是用不透明的像素寫入某種圖像的，那麼在此填充矩形會吹走背景。你在這裏逃脫了，因爲你的畫布上除了之外沒有別的東西在你的畫布上。所以最好去一個裁剪區域。
這裏是版本的剪輯方法：http://jsfiddle.net/5ZgNz/2/
注意使用額外的綠化廣場突出此方法一般工作。
我用setInterval只是爲了保持代碼簡短，你使用setTimeout當然好多了。我只是想表達我的想法。 使用裁剪區域而不是不同的複合操作可能會好得多，所有複合操作（除了默認的源代碼）非常慢 – Rickard
我相信你確實做到了。 :-)我只是給OP一些額外的指導，作爲一件好事。 –
這幾乎是我所需要的！唯一的事情是，如果我將背景改爲黑色並保持文本爲白色，我似乎無法看到文本。有沒有辦法讓文字出現，然後填寫？ – user915134
我做了一些調整，我想我已經取得了成功。這裏是你放入內容的編輯鏈接。 （我還沒有編輯權限。）[鏈接]（http://jsfiddle.net/MBSr2/20/）。 – user915134