javascript - HTML5 Canvas 更快 fillText() vs drawImage()

Question

我有一个数字时钟，它正在运行并且每 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、缓存每个数字然后在每次绘制调用时使用 drawImage() 更快还是更慢？

Answer 1

drawImage 总是，总是比 fillText 快。根据文本的构建方式，它可以快 100 倍以上。

前不久在这里做了一个曲折的分析:

http://simonsarris.com/blog/322-canvas-drawtext-considered-harmful

这是一个简单的 jsperf 示例:http://jsperf.com/image-vs-text