HTML5 캔버스 성능 향상 기술에 대한 경험을 공유하십시오

의견 :이 기사는 캐시 기술을 사용하여 사전 드로잉을 구현하고, 캔버스 컨텐츠의 반복되는 도면을 줄이고, 부동 소수점 좌표를 사용하여 HTML5 캔버스의 성능을 향상시키는 방법을 설명합니다. 관심있는 친구들은 모든 사람에게 도움이되기를 바라고 있습니다.

여러 번, 우리는 캔버스를 그리거나 업데이트하며 항상 이러한 내용에 대한 변경되지 않은 컨텐츠를 유지합니다.

캐시는 모든 새로 고침이 아니라 사전 해제되어야합니다.

코드는 다음과 같이 직접 그려집니다.

context.font = "24px arial";

Context.FillStyle = "Blue";

context.fillText ( "<ESC>를 눌러 게임 종료 게임", 5,50);

requestAnimationFrame (render);

캐시 사전 페인팅 기술 사용 :

함수 렌더 (컨텍스트) {

context.DrawImage (mtext_canvas, 0, 0);

requestAnimationFrame (render);

}

함수 drawText (컨텍스트) {

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 ( "게임 종료하려면 <ESC>를 누르십시오", 5,50);

}

캔버스 캐시 드로잉 기술을 사용하는 경우 캔버스 객체 크기를 실제 캔버스 크기보다 적게 캐시하십시오. 직선을 그리는 작업을 정리하고 한 번에 그릴 수 있습니다. 나쁜 코드는 다음과 같습니다.

for (var i = 0; i <points.length -1; i ++) {

var p1 = 점 [i];

var p2 = 점 [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 <points.length -1; i ++) {

var p1 = 점 [i];

var p2 = 점 [i+1];

Context.Moveto (P1.X, P1.Y);

context.lineto (p2.x, p2.y);

}

Context.Stroke ();

불필요한 캔버스 드로잉 상태의 빈번한 전환을 피하십시오. 그리기 스타일을 자주 전환하는 예는 다음과 같습니다.

var gap = 10;

for (var i = 0; i <10; i ++) {

context.fillstyle = (i % 2? "blue": "red");

context.fillRect (0, i * 갭, 400, 갭);

}

드로잉 상태의 빈번한 전환을 피하면 성능 향상 코드는 다음과 같습니다.

// 심지어

Context.FillStyle = "Red";

for (var i = 0; i <5; i ++) {

context.fillRect (0, (i * 2) * 갭, 400, 갭);

}

// 이상한

Context.FillStyle = "Blue";

for (var i = 0; i <5; i ++) {

context.fillRect (0, (i * 2+1) * 갭, 400, 갭);

}

그리기시 업데이트 해야하는 영역 만 그려서 언제든지 불필요한 중복 도면과 추가 오버 헤드를 피하십시오. 복잡한 장면 드로잉의 경우 계층 적 드로잉 기술이 사용되며 전경 및 배경 드로잉으로 나뉩니다. 캔버스 층을 정의하십시오

HTML은 다음과 같습니다.

<canvas>

</캔버스>

<canvas>

<span> </canvas>

</span>

필요하지 않은 경우 그림자, 흐림 등과 같은 그림 효과를 피하십시오.

부동 소수점 좌표를 사용하지 마십시오

그래프를 그릴 때는 부동 소수점 번호 대신 정수를 선택해야합니다. 그 이유는 캔버스가 반 픽셀 드로잉을 지원하여 소수점 이하의 보간 알고리즘을 구현하여 이미지 도면의 안티 앨리어싱 효과를 달성하기 때문입니다. 필요하지 않은 경우 부동 소수점 값을 선택하지 마십시오.

캔버스에서 드로잉 내용을 지우십시오.

context.clearRect (0, 0, Canvas.Width, Canvas.Height)

그러나 실제로 캔버스에는 해킹과 같은 방법이 있습니다.

canvas.width = canvas.width;

또한 캔버스에 대한 컨텐츠를 청소하는 효과를 얻을 수 있지만 일부 브라우저에서는 지원되지 않을 수 있습니다.