'1분 코딩, 캔버스 라이브 강좌'를 보며 공부!
Canvas01~03 예제에 이은 라인이 그려지는 애니메이션을 구현할 것이다.
✔️ Canvas04~07 예제
◻️ Canvas04 예제 설명
//canvas04
const canvas4 = document.querySelector('.canvas4');
const context4 = canvas4.getContext('2d');
let xPos = 10;
function draw() {
context4.arc(xPos, 150, 15, 0, Math.PI*2, false);
context4.fill();
xPos += 3;//
requestAnimationFrame(draw);
}
draw();라인이 그려지는 애니메이션
- requestAnimationFrame: 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출(초당 60회 반복:엄청 빠름..)
- let xPos = 10: x좌표로의 이동을 위해 변수 선언(10부터 시작하겠다)
- xPos += 3: xPos값이 3씩 늘어남(xPos = xPos + 3을 줄여쓴 것)
즉 x좌표 10부터 시작해서 10,13,16,19,,,,,,이렇게 위치가 빠르게 이동하는 것!
💡 function안에 requestAnimationFrame(draw) 작성하고 바깥에는 draw()작성해야 도형 보임
◻️ Canvas05 예제 설명
//canvas05
const canvas5 = document.querySelector('.canvas5');
const context5 = canvas5.getContext('2d');
let xPos2 = 10;
function draw2() {
context5.clearRect(0, 0, canvas5.width, canvas5.height);
context5.beginPath();
context5.arc(xPos2, 150, 15, 0, Math.PI*2, false);
context5.fill();
xPos2 += 1;
requestAnimationFrame(draw2);
}
draw2();점이 이동하는 애니메이션
- clearRect()를 이용해 점이 한번 그려지면 캔버스 사이즈 만큼 모두 지워지는 효과
- beginPath(): 애니메이션 한번 실행 후 다음 실행을 위해 필수 작성!
◻️ Canvas06 예제 설명
//canvas06
const canvas6 = document.querySelector('.canvas6');
const context6 = canvas6.getContext('2d');
let xPos3 = 10;
function draw3() {
context6.clearRect(0, 0, canvas6.width, canvas6.height);
context6.beginPath();
context6.arc(xPos3, 150, 15, 0, Math.PI*2, false);
context6.fill();
xPos3 += 10;
}
setInterval(draw3, 400);
draw2();setInterval 이용한 점이 이동하는 애니메이션
requestAnimationFrame vs setInterval
- setInterval(" ", 3000): 3초에 한번씩 진행
- requestAnimationFrame에 비해 속도, 시간 조절이 쉬움 But 최적화에 안좋고, 버벅거림이 있을 수 있음
◻️ Canvas07 예제 설명
//canvas07
const canvas7 = document.querySelector('.canvas7');
const context7 = canvas7.getContext('2d');
let xPos4 = 10;
let count = 0;
function draw4() {
if (count % 30 === 0) {
context7.clearRect(0, 0, canvas7.width, canvas7.height);
context7.beginPath();
context7.arc(xPos4, 150, 10, 0, Math.PI*2, false);
context7.fill();
xPos4 += 5;
}
count++;
requestAnimationFrame(draw4);
}
draw4();requestAnimationFrame의 속도 조절
if (count % 30 === 0) { } : count를 나누기 30했을대 나머지가 0인 경우에만 애니메이션 진행(=== 나머지라는 뜻)
count++ : 1씩 증가
1초에 60번 진행하는 requestAnimationFrame이 나머지가 0일때에만 진행되기 때문에 속도가 줄어듦
.
.
.
.
❔ 캔버스 width만큼 애니메이션이 진행 후 다시 x=0에서 시작하고 싶은데 어떻게 해야하는지 모르겠음
📚 Coding Notes