Приостановить и возобновить для холста HTML5?

Question

Есть ли способ приостановить / возобновить для HTML5 Canvas?

Скажи мой код:

// Draw lines with decreasing widths
 for (i = 20; i > 0; i--)
 {
    var v=i*20
   ctx.strokeStyle = "rgb("+v+", "+v+", "+v+")";
   ctx.lineWidth = i;
   ctx.beginPath();
   ctx.moveTo(55, 20 + (20 - i) * 24);
   ctx.lineTo(335, 20 + (20 - i) * 24);
   ctx.stroke();
}

В начале кода я бы хотел, чтобы Pause () имел в виду, я скажу браузеру: «Хорошо, вам не нужно тратить ресурсы на выполнение какого-либо реального рисования прямо сейчас», я просто скажу вы команды. Затем после цикла я буду вызывать Resume (), что означает «хорошо, вы можете начать рисовать их сейчас»

Кстати, кто-нибудь знает, есть ли полная ссылка на контекстный объект в javascript (я не могу найти его ни в Google, ни в MDC ..)

Answer 1

Один из способов решить эту проблему использования ресурсов, когда ничего не происходит, - установить переменную isStarted = false;

Затем включите и выключите его в зависимости от того, оживляются ли вещи.

Затем используйте эту переменную для управления вашим setTimeout / requestAnimFrame

if (isStarted) {
  setTimeout(function() {}, 1000/33);// animation loop thing
}

Я сделал это для игровой среды, которую начал строить, и она отлично работает.

Answer 2

Попробуйте нарисовать линии за кадром, вместо того, чтобы «приостановить» холст: http://kaioa.com/node/103

Результат будет тот же.

var renderToCanvas = function (width, height, renderFunction) {
  var buffer = document.createElement('canvas');
  buffer.width = width;
  buffer.height = height;
  renderFunction(buffer.getContext('2d'));
  return buffer;
};

(фрагмент кода взят с вышеупомянутой веб-страницы)