4. 단일화된 렌더링 파이프라인을 이용해 초당 60번 등록된 객체를 그린다
function draw() {
// 지우기
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 등록된 객체를 그리기
for (var i = 0; i < list.length; i++) {
list[i].drawEachObject();
}
};
// 초당 60번 반복
setInterval(draw, 1000 / 60);
5. 눈에 보이지는 않지만 화면을 매번 다시 그린다
draw draw draw draw draw
초당 60번 반복한다
시스템의 리소스 낭비를 초래하여, 불필요한 전력을 소모하게 만든다. 또한, 디스플레이 갱신 전에 캔버스를 여러 번 고치
더라도 디스플레이 갱신 바로 직전의 캔버스 상태만 적용이 되기 때문에, 프레임 손실이 발생할 수도 있다.
6. requestAnimationFrame을 사용하면
좀 더 자연스러운 애니메이션이 된다
function draw() {
requestAnimationFrame(draw);
// ...
}
requestAnimationFrame(draw);
requestAnimationFrame() 함수는 브라우저가 화면을 업데이트 해야하는 경우에만 콜백함수를 호출한다. 이는 브라우저가 최소화되었
다던가, 다른 탭이 선택된 경우에는 콜백함수를 호출하지 않는다는 것을 의미한다. 또한 콜백함수 호출 주기(DOMHighRestTimeStamp
라고 하는데, )는 브라우저에서 관리되기 때문에 fps 값 설정 없이도 최적화된 (부드러운) 애니메이션 구현이 가능하다.
8. 캔버스에서는 drawImage를 이용해
간단하게 구현할 수 있다
원본 x,y,width,height
drawImage
대상 x,y,width,height
var ctx = elCanvas.getContext("2d");
ctx.drawImage(대상이미지, 원본x, 원본y, 원본너비, 원본높이,
대상x, 대상y, 대상너비, 대상높이);