나중에 애니메이션 프레임에서 목차를 다시 그릴 수 있습니까?

Question

나는 a에 그래프를 그리고있다 <canvas> 비싼 계산이 필요합니다. 그래프가 변하지 않는 애니메이션 (캔버스를 가로 질러 마우스를 움직일 때)을 만들고 싶습니다.

캔버스를 많이 다시 그려야하므로 모든 프레임에 대한 그래프를 렌더링하기 위해 계산을 수행하고 싶지 않습니다. 그래프를 한 번만 그린 다음 저장 한 다음 저장된 렌더링을 사용하여 애니메이션의 후속 프레임을 다시 그리기에 사용하여 값 비싼 계산이 한 번만 발생하면되며 다시 그리기해야 할 일은 훨씬 간단한 애니메이션 레이어입니까?

두 번째 캔버스에 그래프를 그리는 다음 사용했습니다. ctx.drawImage() 메인 캔버스에 렌더링하지만 캔버스를 그리는 것은 Dom에 있고 그렇지 않으면 작동하지 않는 것 같습니다. display:none;. 온도 캔버스를 볼 수없는 위치에 해킹하는 일을해야합니까, 아니면 더 깨끗한 방법이 있습니까?

Answer 1

하나 이상의 캔버스를 사용해야합니다. 하나는 복잡한 도면이 있고, 두 번째는 첫 번째 캔버스를 사용하여 애니메이션 모양의 첫 번째 캔버스 (절대적으로 동일한 크기, 절대로 배치) 위에 있습니다. 이 방법은 IE에서 작동하며 getImagedata는 엑스 칸바에서 작동하지 않습니다.

캔버스의 복잡한 도면을 수행하는 모든 라이브러리는이 방법 (플로트 및 기타)을 사용합니다.

<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% 확신합니다. 차트 레이어와 오버레이 레이어가 있습니다. 소스 코드를 볼 수 있습니다.