HTML5 Canvas 성능 향상을 위한 팁-H5 튜토리얼-php.cn

HTML5 Canvas 성능 향상을 위한 팁

黄舟

풀어 주다： 2017-03-03 16:16:17

원래의

1238명이 탐색했습니다.

1: 캐싱 기술을 사용하여 사전 그리기를 구현하고 Canvs 콘텐츠의 반복 그리기를 줄입니다.

Canvas에서 그림을 그리고 업데이트할 때 여러 번 변경되지 않은 부분을 항상 유지합니다.

콘텐츠를 매번 새로 고치는 대신 캐시에 미리 그려야 합니다.

직접 그리기 코드는 다음과 같습니다.

context.font="24px Arial";
context.fillStyle="blue";
context.fillText("Please press <Esc> to exit game",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("Please press <Esc> to exit game",5,50);
}

로그인 후 복사

캔버스 사용드로잉 기술을 캐싱할 때 실제 캔버스 개체 크기보다 작은 크기를 캐싱해야 한다는 점을 기억하세요. >캔버스

크기. 직선으로 점을 그리는 연산을 모아 한번에 그려보도록 해보세요. 잘못된 코드는 다음과 같습니다.

for (var i = 0; i < points.length - 1; 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 < points.length - 1; i++) {
  var p1 = points[i];
  var p2 = points[i+1];
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
}
context.stroke();

로그인 후 복사

불필요한 캔버스를 피하세요. 도면 상태 자주 전환, 도면 style을 자주 전환하는 예는 다음과 같습니다.

var GAP = 10;
for(var i=0; i<10; i++) {
	context.fillStyle = (i % 2 ? "blue" : "red");
	context.fillRect(0, i * GAP, 400, GAP);
}

로그인 후 복사

도면 상태를 자주 전환하지 마십시오. 성능이 더 좋은 코드는 다음과 같습니다.

// even
context.fillStyle = "red";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2) * GAP, 400, GAP);
}
			
// odd
context.fillStyle = "blue";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2+1) * GAP, 400, GAP);
}

로그인 후 복사

그리실 때 업데이트가 필요한 부분만 그리시고, 언제든지 불필요하게 반복되는 드로잉과 추가 오버헤드를 피하세요.

복잡한 장면 그리기에는 전경과 배경이 구분되는 레이어 드로잉 기술을 사용합니다. Canvas 레이어를 정의하는

HTML은 다음과 같습니다.

<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1"></canvas>

로그인 후 복사

필요하지 않은 경우 그리기 특수 효과를 사용하지 마세요. 그림자, 흐림 등과 같은

부동소수점 좌표를 사용하지 마세요.

캔버스는 1/2픽셀 그리기를 지원하므로 그래픽을 그릴 때 길이와 좌표는 부동 소수점이 아닌 정수여야 합니다.

보간 알고리즘은 그려진 이미지의 앤티앨리어싱 효과를 얻기 위해 소수점 이하 자릿수를 기준으로 구현됩니다. 필요하지 않은 경우 부동 소수점 값을 선택하지 마십시오.

캔버스에서 그리기 내용 지우기:

context.clearRect(0, 0, canvas.width,canvas.height)

그런데 실제로 Canvas에도 비슷한 방법이 있습니다 hack 삭제 방법:

canvas.width = canvas.width;

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

위는 HTML5 Canvas의 성능을 향상시키는 기술에 대한 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지( m.sbmmt.com)!