Vanilla Javascript Effect 무작정 따라하기 #4 canvas에서 text 쪼개기

이 글을 쓰며 매주 하기로 했던 나의 야심찬

 

vanilla javascript effect 무작정 따라하기가 단 3개에서 멈추어있었음을 반성한다. 

 

오늘 HA가 끝나고 힘이 빠져서 자고 싶었지만, 

 

매일 공부를 하다보니 안하는게 더 이상하게 느껴졌기에 그리고

 

내가 정확하게 모르더라도 어디선가 봤었다라는 기억이 있으면 그것을 찾아내서 활용할 수 있기에 

 

아는 것의 범위를 넓히기 위하여 오늘도 늦었지만 공부를 한다. 

 

일단 해당 effect를 구현하기에 몰랐던 부분들을 나열해본다. 

 

• .fillStyle property : 이 속성은 canvas에서 2d context에 색을 채울때 주로 사용했던 것으로 알았으나, mdn에 검색해보니 color 이외에도 gradient, pattern을 지정할 수 있음을 알게 되었다. 
• .font property: canvas에서 text를 그릴 때 현재 text의 스타일을 특정하는 속성이다. 솔직히 오늘 처음 알았다. 처음 접하는 속성이었다.
• .fillText() method는 텍스트 문자열을 지정된 좌표에 그려내어 현재의 fillStyle로 채우는 것이다. optional parameter로 텍스트의 최대 너비를 지정 가능하다. 이것 또한 처음 봤다.
• .getImageData() method는 캔버스의 지정된 부분에 대한 기본 픽셀 데이터를 나타내는 ImageData 개체를 반환한다.
• .arc() method는 x,y를 중심으로 원형 호를 만들고. 경로는 시작 각도로부터 끝 각도까지 이다.  

1차 따라하기

2차 따라하기 HA에서 고통받았기에 코드스테이츠가 잠시 생각났다.

3차 따라하기 본격 물방울을 만들었고 디테일을 조정하는데 꽤 많은 시간이 걸리는 것을 발견했다.

 

프로도 자신이 원하는 결과물을 얻기까지 시간이 걸리며, 끝없이 조정해야하는 것이다.

4차 따라하기 나의 성을 넣어보았다.

리액트에 치여산다고 못했던...바닐라 자바스크립트 ㅠㅠ 

 

치는 것만으로도 감격에 겨웠다. 하지만 모든 코드를 이해하지는 못했다. 

 

지금 당장은 바로 이해가 안되더라도 많이 보면서 코딩을 하면 익숙해지고 점차 깨달아질 것이다.

 

많이 무엇인가 접해야 많은 아이디어를 활용할 수 있는 듯 하다. 

 

계속 관심을 가지고 지켜보자.  

 

아무튼 자발적인 공부가 참으로 즐겁다.