더 빠른 - 캔버스 또는 픽셀 조작을 스태킹하는 것은 어느 것입니까?

Question

일부 HTML 5 기능을 사용하여 테트리스 클론을 만들고 있는데, 약간의 딜레마가 발생했습니다.

내 tetrominos는 블록으로 구성되지 않습니다. 회전에 의존하는 음영 및 음영을 가지므로 각각 자체 이미지입니다. 즉, 게임 상태가 변경 될 때마다 정상적인 "모든 것을 다시 그리기"를 사용할 수 없다는 것을 의미합니다. 이는 모든 조각 놓기 기록을 추적하고 회선을 정리할 때마다 "재생"한다는 것을 의미하기 때문입니다.

그래서 내 옵션은 다음과 같습니다

1) 서로에 쌓아 두 캔버스 요소를 만듭니다. 뒷면에있는 것은 "보드"이미지입니다. 맨 위에있는 것은 조각 캔버스이며, 여기서 물건을 쉽게 슬라이스하고 다시 배열 할 수 있습니다. 모든 것을 하나의 캔버스 요소에 보관하고 싶었 기 때문에 이것은 매우 익숙한 느낌입니다.

2) "그림"컨텍스트와 "버퍼"컨텍스트를 만듭니다. 버퍼 컨텍스트에서 모든 부분을 자유롭게 조작 할 수 있으며 화면에 버퍼를 그릴 때마다 getImageData를 통해 모든 픽셀을 반복하고 보드 이미지에 합성 할 수 있습니다. 그런 다음 putImageData를 사용하여이를 "그리기"컨텍스트에 기록합니다. 이 번거 로움은 ImageData 구조체를 가져 와서 캔버스 요소에 합성하는 방법을 찾을 수 없기 때문에 발생합니다. drawImage를 사용하여 ImageElements로 처리 할 수 ​​있지만 drawImage는 ImageData 구조체를 사용하지 않습니다.

어느 솔루션도 나에게 매우 우아하지 않습니다.

감사

Answer 1

캔버스를 레이어링에 대한 'hackish'어디에도 없습니다.

비슷한 전략이 오래된 동전으로 작동하는 콘솔에서 현대 GPU에 이르기까지 80 년대 8 비트 가정용 컴퓨터를 통과하는 여러 단계에서 수행되며 비슷한 손으로 그린 ​​만화를 언급하지 않고도 비슷한 전략을 사용합니다 기법).

사실 다른 종류의 조작을하더라도 많은 이유로 레이어를 만들어야 할 가능성이 큽니다.