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파일을 실행해보겠습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 스크롤 시 고정 헤드 배경 영역 내려 가시성 높이기 (0) | 2023.08.12 |
|---|---|
| [JavaScript] 스크롤 위치에 따라 메뉴바 변경하기 (0) | 2023.08.10 |
| [Javascript] 스크롤 이벤트를 활용한 동적 요소 표시 (0) | 2023.08.02 |
| [JavaScript] Owl Carousel을 활용한 캐러셀 구현하기 (0) | 2023.07.29 |
| [JavaScript] Todo list 만들기 (0) | 2023.07.24 |
