안녕하세요. 지난 시간 canvas를 이용해 원을 이동시켰다면 오늘은 클릭 이벤트를 받아 시작과 정지를 만들고 원이 끝에 도착했을 때 다시 원점으로 돌아가 시작하는 기능을 만들어 보겠습니다.
먼저 지난 시간 예제의 링크입니다.
https://stickode.tistory.com/886
html 파일 코드 입니다.
<!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 move_ev = false;
// 시작 좌표
let x = 0;
let ani;
// 애니메이션
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이 넘어가면 다시 x좌표값을 0으로 만들어 새로 시작하게 하기
if(x >= 380){
x = 0;
}
ani = requestAnimationFrame(MoveCircle);
}
//클릭 시 이벤트
canvas.addEventListener("click",()=>{
if(move_ev){
move_ev = false;
cancelAnimationFrame(ani);
}else{
move_ev = true;
MoveCircle();
}
})
</script>
</body>
</html>
실행 영상입니다.
클릭시 애니메이션이 시작이 되고 다시 한번 클릭하면 멈춥니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 기본편 (0) | 2023.08.31 |
|---|---|
| [JavaScript] 폼 요소 이벤트 정리 및 예제 (0) | 2023.08.27 |
| [Javascript] localStorage를 활용한 메모 애플리케이션 (0) | 2023.08.13 |
| [JavaScript] 스크롤 시 고정 헤드 배경 영역 내려 가시성 높이기 (0) | 2023.08.12 |
| [JavaScript] 스크롤 위치에 따라 메뉴바 변경하기 (0) | 2023.08.10 |
