javascript - 保存要在以后的动画帧中重绘的 内容？

Question

我正在 <canvas> 上绘制图表这需要昂贵的计算。我想创建一个动画(在 Canvas 上移动鼠标时)，其中图形不变，但在其上绘制了一些其他对象。

因为 Canvas 必须重绘很多次，所以我不想执行计算来为每一帧渲染图形。我怎样才能绘制一次图形，保存它，然后使用保存的渲染重绘动画的后续帧，这样昂贵的计算只需要发生一次并且我只需要重绘更简单的动画层？

我尝试在第二个 Canvas 上绘制图表，然后使用 ctx.drawImage()将其渲染到主 Canvas 上，但在 Canvas 上绘图似乎不起作用，除非它在 ​​dom 中而不是 display:none; .我是否必须做一些棘手的事情，比如将临时 Canvas 放置在视线之外，或者是否有更简洁的方法来做到这一点？

Answer 1

您至少需要使用 2 个 Canvas :一个用于复杂绘图，第二个位于第一个之上(大小相同，绝对定位)，具有动画形状。此方法适用于 IE，getImageData 不适用于 ExCanvas。

每个在 Canvas 上进行复杂绘图的库都使用这种方法(Flot 和其他)。

<div style="width: 600px; height: 300px; position: relative;" id="container">
  <canvas class="canvas" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
  <canvas class="overlay" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
</div>