HTML5画布的暂停和恢复？答案

【问题标题】：Pause and Resume for HTML5 canvas?HTML5画布的暂停和恢复？
【发布时间】：2011-09-05 05:04:30
【问题描述】：

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

【问题讨论】：

上下文对象的完整参考在这里：whatwg.org/specs/web-apps/current-work/multipage/…

标签： javascript html canvas

【解决方案1】：

当什么都没有发生时，我解决资源使用问题的一种方法是设置 var isStarted = false;

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

然后使用该变量来控制您的 setTimeout/requestAnimFrame

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

我为我开始构建的游戏环境做了这个，它运行良好。

【讨论】：

嗨，你能举个例子吗？在画布视频中播放和暂停？，我尝试在暂停后播放视频，但我认为它仍在后台播放。

【解决方案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;
};

（取自上述网页的代码片段）

【讨论】：