如何在html5画布上慢慢填充文本

Question

我目前在画布上有白色文字。我希望能够从左到右缓慢，平滑地用另一种颜色（红色）填充文本。有没有办法做到这一点，所以有时候一个字母在分数上是白色而在另一边是红色的？

使用“颜色”一词的例子。

“Col”是红色的。下一个“o”有25％红色（左）和75％白色（右）。 “r”是全白的。

更新

感谢所有帮助。我注意到如果你在剪辑对象之前添加ctx.beginPath（）会更好。

我已经添加了一些想法，并创建了一个小js对象，似乎对我当前的项目很有效。它可能不是最优雅的js，但希望它可以帮助其他想要在以后做这件事的人。我注意到一个小问题，当文本开始填充时，文本大小会发生变化，不确定原因。 http://jsfiddle.net/WRAFA/4/

Answer 1

您可以使用复合操作源代码执行此操作。如果您首先使用复合操作source-over绘制带有背景颜色（白色）的文本，然后在其上绘制一个带有soruce的彩色矩形 - 在它将被绘制的文本和rect之间的唯一交叉点。我在jsfiddle

做了一个小例子

Answer 2

修理理查德的小提琴很好。我做了一些改进。

1. 你问了一个带有白色文字的黑色画布背景。
2. 此处不建议使用setInterval。你正在为永远，永远，永远和永远运行绘画......我已经修复了使用setTimeout的小提琴，以便在你到达画布边缘时立即停止绘制事件。

调整后的小提琴位于http://jsfiddle.net/d4Jef/1/

但我会推荐一件事。您应该使用剪辑区域来编写文本，而不是使用合成。 source-in合成的问题在于，如果您的文本是使用不透明像素写入某种图像，那么在此处填充矩形会使您的背景消失。你在这里侥幸成功，因为除了文本之外，你的画布上没有别的东西了。因此最好使用裁剪区域。

以下是剪辑方法的版本：http://jsfiddle.net/5ZgNz/2/

请注意使用额外的绿色方块来突出显示此方法的一般用法。