HTML5畫布更快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更快還是慢，緩存每個PNG然后在每次繪制調用時使用drawImage() ？

Answer 1

drawImage是永遠， 永遠快於fillText 。 它可以快100倍以上，具體取決於文本的構造方式。

我不久前在這里做了一個曲折的分析：

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

這是一個簡單的jsperf示例： http ：//jsperf.com/image-vs-text