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更慢或更慢，缓存每个PNG然后在每次绘制调用时使用drawImage()吗？

Answer 1

总是

drawImage，始终比fillText更快。它的速度可以快100倍，具体取决于文本的构造方式。

我不久前在这里进行了蜿蜒的分析：

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

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

HTML5画布更快fillText（）vs drawImage（）

1 个答案: