如何在html5畫布上緩慢填充文本

Question

我目前在白色畫布上有文字。 我希望能夠從左到右緩慢平穩地用另一種顏色（紅色）填充文本。 有沒有辦法做到這一點，有時字母在小數部分上是白色，而另一側是紅色？

一個使用單詞“ Color”的示例。

“顏色”為紅色。 下一個“ o”具有25％的紅色（左）和75％的白色（右）。 “ r”為全白色。

更新

感謝您的所有幫助。 我注意到，如果在clip對象之前添加ctx.beginPath（），效果會更好。

我為這個想法添加了一些內容，並創建了一個小js對象，該對象似乎可以很好地用於當前項目。 它可能不是最優雅的js，但希望它可以幫助其他以后想要這樣做的人。 我注意到，當文本開始填充時，文本大小會發生變化，這是一個小問題，不確定為什么。 http://jsfiddle.net/WRAFA/4/

Answer 1

您可以在復合操作源代碼中進行此操作。 如果您首先使用復合操作source-over繪制背景顏色（白色）的文本，然后使用soruce在其上繪制彩色rect-，則該文本與rect之間的唯一交點。 我在jsfiddle做了一個小例子

Answer 2

修復理查德的小提琴非常出色。 我做了一些改進。

1. 您要求使用白色文字的黑色畫布背景。
2. 不建議在此使用setInterval 。 您將永遠，永遠，永遠，以及永遠地運行繪圖。...我已修復了小提琴使用setTimeout以便一旦到達畫布邊緣，它將停止繪圖事件。

調整后的小提琴位於http://jsfiddle.net/d4Jef/1/

我會推薦一件事。 而不是使用合成，您應該使用剪切區域編寫文本。 source-in合成的問題是，如果您的文本是用某種具有不透明像素的圖像書寫的，那么在該圖像上填充一個矩形將使您的背景變色。 您之所以無法使用它，是因為除了文字之外 ，畫布上別無其他。 因此，最好使用裁剪區域。

這是帶有裁剪方法的版本： http : //jsfiddle.net/5ZgNz/2/

請注意，使用了額外的綠色方塊以突出顯示此方法通常可以使用的方法。