Geek asks and answers

Pause and resume for HTML5 canvas?

Is there any way to pause / resume for HTML5 canvas?

Tell my code:

// 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();
}

At the beginning of the code, I would like to use the Pause () value, I will tell the browser "Well, you do not need to spend resources on any actual drawing right now", I will just tell you the commands. Then after scrolling, I will call Resume (), which means "ok, you can start drawing them now"

By the way, does anyone know if there is a full reference for the context object in javascript (I cannot find it in google or MDC ..)

+3
source share
2 answers

Try drawing lines off the screen instead of pausing the canvas: http://kaioa.com/node/103

He will have the same result.

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

( , -)

+2

, , - var isStarted = false;

, .

var setTimeout/requestAnimFrame

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

, , .

+2

More articles:


All Articles