javascript - 如何用drawImage绘制字母（避免慢速strokeText/fillText）？

Question

我发现了这个 jsperf，它清楚地显示了 drawImage 与 fillText 相比要快多少：

http://jsperf.com/image-vs-text

但是，如果您希望您的文本是动态的，如何实际实现这一点？它认为您需要一个包含所有字母和数字的图像，然后根据给定的字符串部分地绘制它。

有人可以举一个例子来说明它是如何工作的吗？当您尽可能少地实时绘制文本时，我读到它大大加快了您的应用程序......

Answer 1

好吧，javacript 有一些图像，但我尝试过的最好的一个是这个 illustrator 插件。

绘图脚本

例如，这将为 J 生成代码：

lineStyle="rgb(0,0,0)";
lineWidth=1;
beginPath();
moveTo(223,179);
bezierCurveTo(292,187,361,185,430,192);
bezierCurveTo(474,196,522,203,566,196);
bezierCurveTo(587,192,606,182,627,179);
bezierCurveTo(627,198,611,220,606,238);
bezierCurveTo(595,284,590,330,577,376);
bezierCurveTo(566,419,554,462,542,506);
bezierCurveTo(534,544,530,589,514,625);
bezierCurveTo(487,682,392,696,334,695);
bezierCurveTo(206,689,142,577,179,460);
stroke();

它对于小写字母或需要看起来特别的东西非常有用。并且@font face 不是一个选项