HTML5 Canvas 성능 향상 기술 및 경험 Sharing_html5 튜토리얼 기술

Canvs 콘텐츠의 반복 그리기를 줄이기 위해 캐싱 기술을 사용하여 사전 그리기 구현
Canvas에서 그림을 그리고 업데이트할 때 항상 일부 변경되지 않은 콘텐츠를 유지하므로 콘텐츠
가 사전에 있어야 합니다. -매번 새로 고치는 대신 캐싱을 그립니다.
직접 그리는 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

context .font="24px Arial";
context.fillStyle="blue";
context.fillText("게임을 종료하려면 를 누르세요.",5,50);
requestAnimationFrame(render) ;

캐시 사전 그리기 기술 사용:

코드 복사

코드는 다음과 같습니다.

function render(context) {
context.drawImage(mText_canvas, 0, 0)
requestAnimationFrame(render); }
function drawText(context) {
mText_canvas = document.createElement("canvas");
mText_canvas.width = 450;
mText_canvas.height = 54>var m_context = mText_canvas; getContext("2d");
m_context.font="24px Arial";
m_context.fillStyle="blue";
m_context.fillText("게임을 종료하려면 를 누르세요.",5 ,50);
}


Canvas 캐시 그리기 기술을 사용할 때 캐시된 Canvas 개체의 크기는 실제 Canvas 크기보다 작아야 한다는 점을 기억하세요. 직선점을 그리는 연산을 모아 한번에 그려보도록 해보세요. 잘못된 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

for (var i = 0; i var p1 = points[i ];
var p2 = points[i 1];
context.beginPath()
context.moveTo(p1.x, p1.y)
context.lineTo(p2.x, p2.y);
context.Stroke();
}


더 높은 성능으로 수정된 코드는 다음과 같습니다.

코드 복사코드는 다음과 같습니다.

context.beginPath()

for (var i = 0; i var p1 = points[i]
var p2 = points[i 1]
context.x, p1 .y);
context.lineTo( p2.x, p2.y);
}
context.Stroke();


캔버스 그리기 상태를 불필요하게 자주 전환하지 마세요. .그림 스타일을 자주 전환하는 예는 다음과 같습니다.

코드 복사코드는 다음과 같습니다.

var GAP = 10;

for (var i=0; icontext.fillStyle = (i % 2 ? "blue" : "red");
context.fillRect(0, i * GAP, 400, GAP ; 🎜>

코드는 다음과 같습니다.

// 심지어
context.fillStyle = "빨간색";
for (var i = 0; i context.fillRect(0, (i*2) * GAP, 400, GAP)

}; >// 홀수

context.fillStyle = "blue"; for ( var i = 0; i context.fillRect(0, (i*2 1) * GAP , 400, GAP); }

draw 드로잉 시에는 업데이트가 필요한 부분만 그리며, 불필요한 반복 드로잉과 추가 오버헤드는 언제든지 피해야 합니다. 복잡한 장면 렌더링의 경우 레이어드 렌더링 기술이 사용되며 전경과 배경이 별도로 그려집니다. Canvas 레이어를 정의하는

HTML은 다음과 같습니다.





코드 복사


코드는 다음과 같습니다.

필요하지 않은 경우 그림자, 흐림 등 그리기 특수 효과를 사용하지 마십시오.
Canvas에서 그리기 내용 지우기:
context.clearRect(0, 0, canvas.width,canvas.height)
하지만 실제로 Canvas에도 비슷한 해킹이 있습니다. 지우기 방법:
canvas.width = canvas.width; 도 캔버스의 내용을 지우는 효과를 얻을 수 있지만 일부 브라우저에서는 지원되지 않을 수 있습니다.