Canvas Pixel 애니메이션 이미지 소스

Question

캔버스 자바 스크립트 API를 이해하는 데 약간의 문제가 있습니다. 내가 뭘하고 싶은데요 두 개의 PNG의 메모리에로드, 그래서 그들의 바이트 배열을 가지고 requestAnimationFrame 루프와 함께 일부 애니메이션을 할.

하지만 메모리에 표시하지 않고로드하고 애니메이션 효과를 위해 바이트에 액세스하는 것을 좋아합니다.

질문은 내가 그런 식으로 어떻게 할 것인가입니다. 내 관찰에서 나는 을 통해 canvas에서 바이트를 얻을 수 있다는 것을 알게되었습니다. 하지만이 작업에는 DOM에 첨부 된 캔버스와 drawImage 호출이 필요합니다. 이 올바른지? 페인팅하지 않고 바이트를로드하거나 무언가를 그리는 방법이 있습니까?

다음 putImageData 메서드를 사용하여 애니메이션 된 픽셀을 화면에 그려야합니다 ...? 예를 들어 라인 단위 또는 일부 전환 효과 ... 하지만 처음에는 어떻게 표시합니까? 표시하지 않고 픽셀을 준비 할 수 있습니까?

어떤 도움, 링크, 포인터가 좋을 것입니다! 내가 잘못된 길을 가고 있다면 나를 바로 잡아주세요.

Answer 1

아니요, 조작을 위해 캔버스가 DOM에있을 필요는 없습니다. 자바 스크립트에서 바로 캔버스를 만들 수 있습니다. 이것은 일반적으로 "backing canvas"라고 부르며 일반적으로 일부 라이브러리에서 장면을 미리 렌더링하는 데 사용됩니다.

동영상은 DOM 외부 캔버스로 그려지는 demo from HTML5Doctor입니다 (기사 마지막 부분 어딘가에 "검색"). 그런 다음 그것은 보이는 캔버스에 침투되기 전에 조작을 위해 픽셀 데이터를 "긁어 낸"것입니다.

캔버스에 그림을 그리기 전에 이미지를로드했는지 확인하십시오.