保存<画布>内容在以后的动画帧被重绘？

StackOverflow https://stackoverflow.com/questions/1067320

  •  21-08-2019
  •  | 
  •  

题

我绘图上需要昂贵的计算一个<canvas>的曲线图。我想创建动画（运动在画布鼠标时），其中所述图是不变的，但一些其他目的被绘制在其上。

由于画布将不得不重新绘制了很多，我不想进行计算，以渲染每一帧的图形。我怎样才能绘制图形一次，保存它，然后使用保存的渲染，重新绘制动画的后续帧，使昂贵的计算只发生一次 - 我必须重绘是更简单的动画层？

我试图绘制图形的第二画布上＆然后使用ctx.drawImage()以使其到主帆布，但描绘在画布上似乎不工作，除非它是在DOM＆不display:none;。我必须做一些哈克像位置的临时画布拿出来看，还是有一个更清洁的方式做到这一点？

有帮助吗？

解决方案

您需要使用至少2个画布：一个与所述复杂的绘图，所述第二，在第一（具有相同的尺寸，定位在绝对）的顶部，与动画的形状。此方法将工作IE，并且getImageData不与ExCanvas工作。

每个其确实在画布上复杂的图形库使用此方法（海军报等）。

<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>

其他提示

如何画布上绘制图表中的第一次，然后

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

和然后

ctx.putImageData( imdata, 0,0);

用于渲染的其余部分。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top