커스텀 화면이나, 애니메이션을 만들고 싶을때가 있다.


태그 조합으로 css 애니메이션, animate 함수를 써도 되지만,


Canvas 객체로 코딩하는 것도 방법이다.


Canvas 객체로 코딩을 하는 도중에 이미지 , 텍스트가 이상하게 깨져 나오는 현상을 접했다.


알고보니, Canvas는 자체 해상도를 가지고 있고, 화면에 그려지는 크기를 따로 가지고 있었다.


1
<canvas id="myCanvas" width="1920" height="1080" style="width : 300px; height : 300px"></canvas>
cs


위와 같이 해상도는 컴퓨터 해상도로 맞춰주고, 화면에 그려지는 크기를 300px, 300px로 설정했더니,


이미지나 텍스트가 깨져 나오는 현상이 사라졌다.

'Html5 & CSS3' 카테고리의 다른 글

Html5 & CSS3 - 브라우저 접두사(prefix)  (0) 2016.11.15

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee
  1. 이진솔 2018.01.13 22:51

    오호 감사 합니다. 근데 width랑 height값이 바뀐거같네요 ㅎㅎ 선이 늘어지길래..!

+ Recent posts