overflow: hidden;
=> body에 기본적으로 적용할 수 있는 상자 밖으로 넘칠 때, 잘려서 보이게 하는 스타일 옵션
ctx.translate(width/2, height/2);
=> 원점을 화면 중앙으로 오게 하는 거
=> 화면 디자인들이 중앙이 중심이기 때문에 매우 유용하다
캔버스 내용을 지웁니다. (fillRect() or clearRect())
=> 공을 그리는건 아직 내 실력으로 무리... 함수들도 잘 모르겠다
=> 참 신기하게 걸어다니는 애니메이션을 완성했다
=> 단순히 이 코드를 이용하는것만으로도 이런 걷는 애니메이션 효과는 앞으로 활용할 수 있을 것 같다
ctx.translate(width/2, height/2);
=> 페이지 전체에서 결과물을 보여주게 하기에 중앙을 좌표 중심으로 잡는다
let image = new Image();
image.src = 'walk-right.png';
image.onload = draw;
=> 전에 배웠던 image객체를 만들어주고 src, onload 속성을 넣어준다
=> 참고로 walk-right.png 파일은 같은 위치에 존재한다
let sprite = 0;
let posX = 0;
=> 스프라이트가 뭔지 정확히 안알려주는 바람에 고민을 했다.
=> posX가 그림을 그릴 위치에 해당하는 x 좌표구
=> sprite의 번호가 주어진 스프라이트 시트 (sprite sheet)
=> 사전 준비는 끝냈고 이제 본격적인 애니메이션 알고리즘
ctx.fillRect(-(width/2), -(height/2), width, height);
=> 말그대로 다음 그림을 그리기 전에 리셋하는 과정을 거친다
=> 하지만 컴퓨터가 하는 이 리셋 작업은 너무 빠르기 때문에 우리가 인지하지는 못한다 그러므로 연속된 액션이 등장한다.
ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
=> drawImage라는 함수에 각자 위치에 따른 역할들이 존재한다.
if (posX % 13 === 0) {
if (sprite === 5) {
sprite = 0;
} else {
sprite++;
}
}
=> 한마디로 전체그림의 위치가 13이 됐을때 splite에 변화를 주는것
if(posX > width/2) {
newStartPos = -((width/2) + 102);
posX = Math.ceil(newStartPos);
console.log(posX);
} else {
posX += 2;
}
=> 그림 그리기의 시작은 중앙인 width/2에서 시작된다 그러므로 추가적으로 width/2가 되면 오른쪽 끝이라는 뜻 그러므로 왼쪽으로 돌려주는 역할
window.requestAnimationFrame(draw);
https://github.com/2taesung/JSOfficialDoc/tree/master/ani
어렵....다 근데 .... 재밌다 ....