[英]HTML5 canvas faster fillText() vs drawImage()
我有一个正在运行的数字时钟,每10毫秒更新一次。 在每个抽奖电话中,我使用这个:
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);
现在这比创建数字0 - 9的PNG更快还是慢,缓存每个PNG然后在每次绘制调用时使用drawImage()
?
drawImage
是永远, 永远快于fillText
。 它可以快100倍以上,具体取决于文本的构造方式。
我不久前在这里做了一个曲折的分析:
http://simonsarris.com/blog/322-canvas-drawtext-considered-harmful
这是一个简单的jsperf示例: http ://jsperf.com/image-vs-text
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.