保存<canvas>内容以便在以后的动画帧中重绘？

Question

我正在绘制一个<canvas>需要昂贵计算的图表.我想创建一个动画(当在画布上移动鼠标时),其中图形是不变的,但是在它上面绘制了一些其他对象.

因为画布必须重绘很多,所以我不想执行计算来为每一帧渲染图形.如何绘制图形一次,保存它,然后使用保存的渲染重绘动画的后续帧,这样昂贵的计算只需要进行一次,所有我需要重绘的是更简单的动画层？

我尝试在第二个画布上绘制图形,然后使用ctx.drawImage()它将其渲染到主画布上,但画布上的绘图似乎不起作用,除非它在dom中而不是display:none;.我是否必须做一些hacky,比如将临时画布放在视线之外,还是有更清洁的方法来做到这一点？

Answer 1

您需要使用至少2幅画布:一幅使用复杂绘图,第二幅画布在第一幅画布上(大小相同,绝对位置),并带有动画形状.此方法适用于IE,并且getImageData不适用于ExCanvas.

在画布上进行复杂绘画的每个图书馆都使用这种方法(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>