html5 canvas animation
TRANSCRIPT
애니메이션이란무엇일까?
애니메이션은 연속된 장면을 화면에 빠르게 표시해 움직임을 나타낸다
단일화된 렌더링 파이프라인을 이용해 초당 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);
눈에 보이지는 않지만 화면을 매번 다시 그린다
draw draw draw draw draw
초당 60번 반복한다
시스템의 리소스 낭비를 초래하여, 불필요한 전력을 소모하게 만든다. 또한, 디스플레이 갱신 전에 캔버스를 여러 번 고치더라도 디스플레이 갱신 바로 직전의 캔버스 상태만 적용이 되기 때문에, 프레임 손실이 발생할 수도 있다.
requestAnimationFrame을 사용하면
좀 더 자연스러운 애니메이션이 된다
function draw() {requestAnimationFrame(draw);// ...
}
requestAnimationFrame(draw);
requestAnimationFrame() 함수는 브라우저가 화면을 업데이트 해야하는 경우에만 콜백함수를 호출한다. 이는 브라우저가 최소화되었다던가, 다른 탭이 선택된 경우에는 콜백함수를 호출하지 않는다는 것을 의미한다. 또한 콜백함수 호출 주기(DOMHighRestTimeStamp라고 하는데, )는 브라우저에서 관리되기 때문에 fps 값 설정 없이도 최적화된 (부드러운) 애니메이션 구현이 가능하다.
움직이는 동작은 지난 시간에 배웠던 스프라이트를 이용한다
캔버스에서는 drawImage를 이용해간단하게 구현할 수 있다
원본 x,y,width,height
drawImage
대상 x,y,width,height
var ctx = elCanvas.getContext("2d");
ctx.drawImage(대상이미지, 원본x, 원본y, 원본너비, 원본높이,
대상x, 대상y, 대상너비, 대상높이);
좀 더 나아가 보자
마시마로처럼몇백번을볼지라도같은그림이같은위치에같은시간에나타난다.
이런것을정적애니메이션이라고한다.
동적애니메이션이란?
Draw = function () {context.fillStyle = this.color;context.beginPath();context.arc(this.x, this.y, 5, 0, Math.PI * 2, true);context.fill();
}
Move = function () {this.x = this.x+this.vX;this.y = this.y+this.vY;
}
Bounce = function () {var X = this.x + this.vX;var Y = this.y + this.vY;
if (X < 0 || X >canvas.width) {this.vX = -this.vX;
}if (lY < 0 || Y > canvas.height) {
this.vY = -this.vY;
}}
동적 애니메이션이란 그때 그때 결과가 다른 애니메이션을 의미하고, 사용자와 반응하는 애니메이션이다. 간단하게 말하면 게임이 될 수 있다.
이미지를 넣고, 그림을 그리고, 색깔을 입히는 등 간단한 그림판 제작하기
Creating a drawing app with HTML5 Canvas and Javascript