JavaScript
[Javascript] canvas로 애니메이션 만들기
teamnova
2023. 8. 7. 12:00
728x90
안녕하세요. 오늘은 canvas 위에 원을 그려 애니메이션을 추가하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
//그리기객체
const context = canvas.getContext("2d");
// 시작 좌표
let x = 0;
// 애니메이션
function MoveCircle(){
//캔버스 지우기
context.clearRect(0, 0, canvas.width, canvas.height);
// 원 생성
context.beginPath();
context.arc(x, 150, 10, 0, Math.PI * 2, false);
context.fill();
//x좌표값 추가함으로서 이동시키기
x += 2;
//x좌표값이 380이 된다면 호출되지 않게
if(x <= 380){
requestAnimationFrame(MoveCircle);
}
}
//함수 호출
MoveCircle();
</script>
</body>
</html>
html파일을 실행해보겠습니다.