HTML5 Canvas быстрее fillText () против 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);

Теперь это быстрее или медленнее, чем создание PNG чисел 0–9, кэширование каждого из них и затем использование drawImage() при каждом вызове розыгрыша?

Answer 1

drawImage всегда, всегда быстрее, чем fillText. Это может быть в 100+ раз быстрее в зависимости от того, как построен текст.

Я недавно провел здесь меандрирующий анализ:

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

Вот простой пример jsperf: http://jsperf.com/image-vs-text