Canvas перерисовывает себя каждый раз, когда что-то меняется?

Question

Я провел некоторое исследование о том, как работает холст.Предполагается, что «немедленный режим» означает, что он не помнит, как выглядит его чертеж, только растровое изображение остается каждый раз, когда что-либо меняется.

Это, по-видимому, говорит о том, что canvas не перерисовывается при изменении.* Однако, когда я тестировал холст на iPad (в основном я продолжаю рисовать параллельные линии на холсте), частота кадров быстро снижается, когда на холсте больше линий.Линии рисуются медленнее и более скачкообразно.

Означает ли это, что холст должен рисовать все это при изменении?Или есть другая причина для этого изменения в производительности?

Answer 1

HTML-холст запоминает конечное состояние пикселей после каждого вызова штрих / заливка.Он никогда не перерисовывает себя.(Веб-браузер, возможно, должен перетянуть части окончательного изображения на экран, например, если другой объект HTML перемещается по холсту, а затем снова удаляется, но это не то же самое, что повторный ввод команд рисования.

Контекст всегда запоминает свое текущее состояние, включая любой путь, который вы накопили.Возможно, что вы (случайно) не очищаете свой путь между «обновлениями», и поэтому в первом кадре, который вы рисуете одинстрока, во втором кадре две строки, в третьем кадре три строки и т. д. (Вы звоните ctx.closePath() и ctx.beginPath()? Вы очищаете холст между рисунками?)

Вот пример , показывающий, что холст не перерисовывается сам по себе. Даже на десятках тысяч строк я вижу ту же частоту кадров, что и с сотнями строк (ограничена 200 кадров в секунду в Chrome, ~ 240 кадров в секунду в Firefox 8.0 при рисовании 10 линийза кадр).

var lastFrame = new Date, avgFrameMS=5, lines=0;
function drawLine(){
  ctx.beginPath();
  ctx.moveTo(Math.random()*w,Math.random()*h);
  ctx.lineTo(Math.random()*w,Math.random()*h);
  ctx.closePath();
  ctx.stroke();
  var now = new Date;
  var frameTime = now - lastFrame;
  avgFrameMS += (frameTime-avgFrameMS)/20;
  lastFrame = now;
  setTimeout(drawLine,1);
  lines++;
}
drawLine();

// Show the stats infrequently
setInterval(function(){
  fps.innerHTML = (1000/avgFrameMS).toFixed(1);
  l.innerHTML = lines;
},1000);

В действии: http://phrogz.net/tmp/canvas_refresh_rate.html

Для получения дополнительной информации о том, что на самом деле ваш кодПо сравнению с тем, что вы подозреваете, поделитесь с нами своим тестовым примером.