Question

我在<canvas>上绘制图表，需要进行昂贵的计算。我想创建一个动画（当在画布上移动鼠标时），其中图形不变，但是在其上绘制了一些其他对象。

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

我尝试在第二个画布上绘制图形＆amp;然后使用ctx.drawImage()将其渲染到主画布上，但画布上的画面似乎不起作用，除非它在dom＆amp;不是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>

Answer 2

如何在画布上首次绘制图形，然后

var imdata = ctx.getImageData(0,0,width,height);

然后

ctx.putImageData( imdata, 0,0);

用于渲染的其余部分。

Answer 3

我不得不对flot.js图表库进行一些更改。我99％肯定它使用重叠的画布。有图表图层和覆盖图层。你可以查看源代码。

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

3 个答案: