저는 캔버스에 간단한 게임 (위에서 본 것)을 만들려고합니다. 좀 더 빨리 말해주세요 :여러 캔버스 요소가 성능에 미치는 영향은 무엇입니까?
1) 모든 것을 그려서 <canvas>
에 그려서 다시 그려야 할 부분을 계산하십시오.
2) 다른 <canvas>
요소에 장면의 특정 부분을 그리고 필요한 경우에만 각각을 업데이트하십시오. 이 변형에서 아마도 부분 그리기를 사용할 수도 있습니다.
예를 들어지도에서 한 요소, 두 번째 요소, 세 번째 요소에 커서 등을 그릴 수 있습니다. 적을 움직일 때, 두 번째 캔버스 만 다시 그릴 수있었습니다.
어떤 옵션이 더 좋고 왜 좋은지 자세히 설명하십시오. 그리고이 문제에 대한 나의 지식을 깊게 할 수있는 책을 조언 해 주시겠습니까? 초보자를위한.
귀하의 질문은 코드가 무엇을 해야할지에 따라 달라질 수 있습니다. 복잡성은 CPU에만 작용합니다. 성능을 위해 간단하게 유지하십시오. 대부분의 게임은 하나의 디스플레이 캔버스를 사용하고 모든 프레임 (1/60 초) 전체 캔버스를 다시 그립니다. 지식을 얻는 가장 좋은 방법은 IDE를 열어 코드를 작성하는 것입니다. 곧 질문에 대한 답변을 얻을 수 있습니다. BTW 추적 영역 다시 그리기 영역은 막 다른 길입니다. – Blindman67
왜 다시 그리기 영역을 추적하는 것이 막 다른 길일 것이라고 생각하십니까? 나는 이것이 부하를 줄여야한다고 생각했다. –
GPU는 PPS (초당 픽셀) GPU에 관한 모든 것이 빠르며, 자바 스크립트는 아니다. 무슨 뜻인지 알기 위해서 캔버스를 만들고 컨텍스트를 얻은 다음'const test = s => { var n = performance.now(); for (var i = 0; i <10000; i ++) { ctx.clearRect (0,0, s, s); } console.log (((performance.now() - n)/(s * s)));} test (10); test (300); 두 번째 호출은 픽셀을 ~ 10,000 배 빠르게 지 웁니다. – Blindman67