canvas

애니메이션 만들기

by Kim Ara

HTML

<canvas id="myCanvas" width="800" height="400"> </canvas>

JavaScript

var canvas=$('#myCanvas').get(0);
var ctx=canvas.getContext('2d');

// 캔버스의 폭을 가져온다.
var ctxW=canvas.width; 
// 캔버스의 높이를 가져온다.
var ctxH=canvas.height;
// x좌표에 사용할 변수를 선언한다.
var x = 0;

//animate 함수 선언
function animate(){
	// 캔버스를 깨끗이 지운다. 이 부분이 없으면 빨간색 선이 그려진다.
	ctx.clearRect(0,0, ctxW, ctxH);
  // 사각형을 붉게 채운다.
  ctx.fillStyle='red';
  // 사각형을 그린다.
  ctx.fillRect(x,10,50,50);
  // x좌표를 30ms마다 1씩 더한다.
  x++;
}

// setInterval 함수를 실행하여, animate 함수를 30ms마다 실행한다.
var animateInterval = setInterval(animate, 30);