canvas_Interval.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>
<style>
div {
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
</style>
</head>
<body>
<div></div>
<script>
// 애니메이션 , setInterval
const div = document.querySelector('div');
let divLeft = 100;
setInterval(function() {
div.style.left = divLeft+'px';
divLeft += 50;
if(divLeft > window.innerWidth) {
divLeft = 10;
}
}, 1000)
</script>
</body>
</html>
canvas_Request.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>
<style>
div {
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<button>정지</button>
<script>
// 1초에 60만큼 프레임 만듦
// setinterval --> clearInterval 로 정지시킴
// requestAnimationFrame() --> cancelAnimationFrame(변수명); // 정지
const div = document.querySelector('div');
const btn = document.querySelector('button');
let animation;
let x = 100;
function divMove() {
x += 1; // 1씩 더하기
div.style.left = x+'px';
animation = requestAnimationFrame(divMove); // 재귀함수 (나 자신을 호출) 🧡
}
divMove();
div.addEventListener('click',()=>{
cancelAnimationFrame(animation);
})
</script>
</body>
</html>
