[英]HTML5 canvas faster fillText() vs drawImage()
I have a digital clock that is running and being updated every 10 milliseconds. 我有一个正在运行的数字时钟,每10毫秒更新一次。 In each draw call I am using this:
在每个抽奖电话中,我使用这个:
var gradient = clockContext.createLinearGradient(0, 0, 0, this.digitWidth);
gradient.addColorStop(0.15, "rgb(255, 252, 52)");
gradient.addColorStop(0.15, "rgb(245, 127, 26)");
gradient.addColorStop(1, "rgb(248, 159, 52)");
clockContext.fillStyle = gradient;
clockContext.lineWidth = 1;
clockContext.lineStyle = "#000000";
clockContext.fillText(time, (this.digitWidth * i) + e + s, 46);
clockContext.strokeText(time, (this.digitWidth * i) + e + s, 46);
Now is this quicker or slow than creating a PNG of the numbers 0 - 9, caching each one and then using drawImage()
on each draw call? 现在这比创建数字0 - 9的PNG更快还是慢,缓存每个PNG然后在每次绘制调用时使用
drawImage()
?
drawImage
is always, always faster than fillText
. drawImage
是永远, 永远快于fillText
。 It can be 100+ times faster depending on how the text is constructed. 它可以快100倍以上,具体取决于文本的构造方式。
I did a meandering analysis here not long ago: 我不久前在这里做了一个曲折的分析:
http://simonsarris.com/blog/322-canvas-drawtext-considered-harmful http://simonsarris.com/blog/322-canvas-drawtext-considered-harmful
Here's a simple jsperf example: http://jsperf.com/image-vs-text 这是一个简单的jsperf示例: http ://jsperf.com/image-vs-text
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.