HTML5画布的暂停和恢复?

时间:2011-05-31 05:17:05

标签: javascript html5 canvas

有没有办法暂停/恢复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中都找不到它。)

2 个答案:

答案 0 :(得分: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;
};

(代码片段取自上述网页)

答案 1 :(得分:2)

我没有发生任何事情时解决了这个资源使用问题的一种方法是设置var isStarted = false;

然后根据事物的动画来打开和关闭它。

然后使用该var来控制setTimeout / requestAnimFrame

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

我为我开始构建的游戏环境做到了这一点,它完美无缺。