Javascript로 애니메이션을 구현하기 위해서는 setInterval()을 사용한다.
짧은 시간 내 반복하여 화면을 출력해 마치 구현한 개체가 움직이는 것처럼 보이게 하는 방식이기 때문이다.
교과서 모서리 부분들에 연속된 그림을 그려 애니메이션을 구현했던 것과 비슷하다.
01. Canvas 제작
canvas Element에 대하여,
img 태그와 비슷하지만 alt나 src 속성이 없고, witdh와 height 속성만 있는 것이 다르다.
witdh와 height 속성 또한 필수는 아니다.초기값 witdh="300px" height="150px"
<html>
<!-- html내 정사각형의 myCanvas 형성 -->
<canvas id="myCanvas" width='400' height="400"></canvas>
<!-- 외부 스크립트 연결 -->
<script src="./brickGame.js"></script>
</html>canvas 요소는 getContext() 메서드를 이용하여 랜더링 컨텍스트와 내장된 그리기 함수들을 사용할 수 있다.
getContext() 메서드는 렌더링 컨텍스트 타입 (2d / 3d)을 지정하는 하나의 매개변수를 가진다.
canvas 이용 시 참고사항
getContext()를 사용하기 전 canvas를 초기화 해주어야 한다.
context의 요소는 순서대로 x(가로위치), y(세로위치), w(넓이), h(높이) 이다.
<script>
context.clearRect(0, 0, canvas.width, canvas.height);
</script>02. setInterval()
출력 역할을 하는 함수(draw)와 상태변경 내용을 체크하는 함수(update)를 만들어 0.01초마다 반복하도록 하였다.
<script>
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext('2d');
// 화면 출력
function draw(){
context.clearRect(0, 0, canvas.width, canvas.height);
}
// 상태변경 체크
function update(){
}
setInterval(draw, 10);
setInterval(update, 10);
</script>03. draw개체()
canvas에 도형을 그리기 위해 drawPaddle함수를 생성하여 draw함수안에 넣어주었다.
<script>
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext('2d');
//=============================================
//변수 모음 영역
//=============================================
// 화면 출력
function draw(){
context.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();
}
// 상태변경 체크
function update(){
}
// 패들 생성
function drawPaddle (){
context.beginPath();
context.rect((canvas.width / 2 - 100 / 2), (400 - 20), 100, 20);
//x = 200, y = 200, 넓이 100, 높이 20
//canvas.width / 2 - barWidth / 2 => canvas를 절반으로 나눠 한 방향으로 몰리지 않게 반넓이 만큼 빼주었다.
context.fillStyle = 'white';
context.fill();
context.closePath();
}
setInterval(draw, 10);
</script>위 코드의 재활용성을 높이기 위해 변수처리 하였다. 변경한 내용은 다음과 같다.
<script>
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext('2d');
//=========== 변수 영역 ===========
let barWidth = 100; //바 길이
let barHeight = 20; //바 굵기
let barPosX = canvas.width / 2 - barWidth / 2; // => canvas를 절반으로 나눠 한 방향으로 몰리지 않게 반넓이 만큼 빼주었다.
let barPosY = canvas.height - barHeight; // => canvas의 가장 밑부분으로 두고 화면 밖으로 나가지 않게 높이를 빼주었다.
//===============================
// 화면 출력
function draw(){
context.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();
}
// 패들 생성
function drawPaddle (){
context.beginPath();
context.rect(barPosX, barPosY, barWidth, barHeight);
context.fillStyle = 'white';
context.fill();
context.closePath();
}
// 상태변경 체크
function update(){
}
setInterval(draw, 10);
setInterval(update, 10);
</script>같은 방법으로 공도 만들어주었다.
<script>
// 공 생성
function drawBall (){
context.beginPath(); //도형시작점
context.arc(ballPosX, ballPosY, arcRadius, 0, ( 2 * Math.PI )); //arc = 원형
context.fillStyle = 'white';
context.fill();
context.closePath(); //도형종결점
}
</script>04. update() 내부 기능
ball의 상하 이동
햇님쓰 개발일기장