당신 이 알 아야 할 10 가지 Canvas 성능 향상 기술
14315 단어 canvas
프 리 렌 더 링
오류 코드:
var canvas = document.getElementById("myCanvas");
var context = this.canvas.getContext('2d');
var drawAsync = eval(Jscex.compile("async", function () {
while (true) {
drawMario(context);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
정확 한 코드:
var canvas = document.getElementById("myCanvas");
var context = this.canvas.getContext('2d');
var m_canvas = document.createElement('canvas');
m_canvas.width = 64;
m_canvas.height = 64;
var m_context = m_canvas.getContext('2d');
drawMario(m_context);
var drawAsync = eval(Jscex.compile("async", function () {
while (true) {
context.drawImage(m_canvas, 0, 0);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
여기 mcanvas 의 너비 와 높이 는 작 을 수록 좋 습 니 다.
2. canvasAPI 를 최대한 적 게 호출 합 니 다.
오류 코드:
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();
3. CANVAS 상 태 를 최대한 적 게 변경
오류 코드:
for (var i = 0; i < STRIPES; i++) {
context.fillStyle = (i % 2 ? COLOR1 : COLOR2);
context.fillRect(i * GAP, 0, GAP, 480);
}
정확 한 코드:
context.fillStyle = COLOR1;
for (var i = 0; i < STRIPES / 2; i++) {
context.fillRect((i * 2) * GAP, 0, GAP, 480);
}
context.fillStyle = COLOR2;
for (var i = 0; i < STRIPES / 2; i++) {
context.fillRect((i * 2 + 1) * GAP, 0, GAP, 480);
}
4. 다시 보 여 주 는 범 위 는 최대한 작 습 니 다.
오류 코드:
context.fillRect(0, 0, canvas.width, canvas.height);
정확 한 코드:
context.fillRect(20, 20, 100, 100);
5. 복잡 한 장면 은 다 층 화 포 를 사용한다.
<canvas width="600" height="400" style="position: absolute; z-index: 0">
</canvas>
<canvas width="600" height="400" style="position: absolute; z-index: 1">
</canvas>
6. 그림자 사용 하지 마 세 요.
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillRect(20, 20, 150, 100);
캔버스
상세 한 성능 차이: http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters 일반적인 상황 에서 clearRect 의 성능 은 fillRect 보다 canvas. width = canvas. width 보다 우수 합 니 다.
8. 픽 셀 등급 조작 은 가능 한 한 정수 로 한다.
몇 가지 정 수 를 취 하 는 방법:
rounded = (0.5 + somenum) | 0;
rounded = ~ ~(0.5 + somenum);
rounded = (0.5 + somenum) << 0;
9. requestAnimationFrame 로 게임 이나 애니메이션 만 들 기
(
function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (
var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame =
function (callback, element) {
var currTime =
new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(
function () { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame =
function (id) {
clearTimeout(id);
};
} ());
기타
렌 더 링 과 무관 한 계산 은 워 커 에 게 맡 깁 니 다.
복잡 한 계산 은 엔진 에 맡긴다. 예 를 들 어 3D, 물리 등 이다.
캐 시 load 좋 은 그림, canvas 에 canvas 를 그 리 는 것 이지 image 를 그 리 는 것 이 아 닙 니 다.
동기 화
이 글 은 다음 과 같이 동기 화 되 었 습 니 다.
HTML 5 실험실 [디 렉 터 리]: http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Jetpack Compose를 사용한 커스텀 컴포저블첫 번째 기사 시리즈에서는 Jetpack Compose에서 맞춤 보기를 만드는 방법에 대해 이야기하고 싶습니다. Labeled Ranged Slider의 예에서는 완전히 맞춤설정된 컴포저블을 만드는 데 필요한 단계를...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
