Pergunta
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?
Solução
É 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>
Outras dicas
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.
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.