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

【问题标题】：How to draw letters with drawImage (to avoid slow strokeText/fillText)?如何用drawImage绘制字母（避免慢速strokeText/fillText）？
【发布时间】：2013-06-19 08:03:24
【问题描述】：

我找到了这个 jsperf，它清楚地显示了 drawImage 与 fillText 相比的速度：

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

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

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

【问题讨论】：

如果您计划为每个字形创建一个单独的图像并为字符串的每个字符分别绘制每个字形，那么我很确定您的脚本会比strokeText 和fillText 慢结合。你为什么要这样做？

标签： javascript html performance canvas

【解决方案1】：

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

DrawScript

例如，这将为 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 不是一个选项

【讨论】：