html - Canvas 是否会在每次发生任何变化时重新绘制自己？

Question

我对 Canvas 的工作原理做了一些研究。它应该是“立即模式”意味着它不记得它的绘图是什么样子，每次发生任何变化时只保留位图。

这似乎表明 canvas 不会在发生变化时重新绘制自身。
但是，当我在 iPad 上测试 Canvas 时(基本上我一直在 Canvas 上绘制平行线)，当 Canvas 上有更多线条时，帧速率会迅速降低。线条的绘制速度更慢，而且更跳跃。

这是否意味着 Canvas 实际上必须在更改时绘制整个内容？或者还有其他原因导致这种性能变化？

Answer 1

HTML Canvas 会在每次调用笔划/填充后记住像素的最终状态。它从不重绘自己。 (Web 浏览器可能需要将最终图像的部分重新 blit 到屏幕，例如，如果另一个 HTML 对象在 Canvas 上移动然后再次离开，但这与重新发出绘图命令不同。

上下文总是记住它的当前状态，包括你已经积累的任何路径。您可能(不小心)没有清除“刷新”之间的路径，因此在第一帧画一条线，在第二帧画两条线，在第三帧画三线，等等。 (你在调用 ctx.closePath() 和 ctx.beginPath() 吗？你在清除绘图之间的 Canvas 吗？)

这是 an example显示 Canvas 不会重绘自身。即使在数万行时，我看到的帧速率也与数百行相同(当每帧绘制 10 行时，在 Chrome 上上限为 200fps，在 Firefox 8.0 上上限为 ~240fps)。

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

有关您的代码实际在做什么以及您怀疑它在做什么的更多反馈，请与我们分享您的测试用例。