Salvar conteúdo a ser redesenhado em quadros de animação posteriores?

Question

Estou desenha um gráfico em uma <canvas> que requer cálculos caros. Eu gostaria de criar uma animação (ao mover o mouse sobre a tela), onde o gráfico é imutável, mas alguns outros objetos são desenhados sobre ele.

Porque a tela terá que ser redesenhado muito, eu não quero para executar os cálculos para tornar o gráfico para cada frame. Como posso desenhar o gráfico uma vez, salvá-lo e, em seguida, usar a salvo de renderização para redesenhar quadros subsequentes da animação, para que os cálculos caros só tem que acontecer uma vez e tudo o que tenho para redesenhar é a camada de animação muito mais simples?

Eu tentei desenhar o gráfico em uma segunda tela e, em seguida, usando ctx.drawImage() para torná-lo para a tela principal, mas desenho sobre a tela não parece trabalho a menos que seja no dom & não display:none;. Eu tenho que fazer algo hacky como a posição a temperatura tela Fora de vista, ou há uma maneira mais limpa de fazer isso?

Answer 1

É necessário o uso de pelo menos 2 telas: um com o desenho complexo, e a segunda, na parte superior do primeiro (com o mesmo tamanho, posicionado em absoluto), com as formas de animação. Este método irá funcionar no IE, e getImageData não funciona com ExCanvas.

Cada biblioteca que faz desenhos complexos em telas usar este método (Flot e outros).

<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

Como cerca de desenhar o seu gráfico pela primeira vez em sua tela e, em seguida,

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

e

ctx.putImageData( imdata, 0,0);

para o resto da prestação.

Answer 3

Eu tive que fazer algumas alterações para o flot.js biblioteca de gráficos. Tenho 99% de certeza que ele usa telas sobrepostas. Há uma camada de gráfico e uma camada de cobertura. Você pode olhar para o código-fonte.