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


태그 조합으로 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값이 바뀐거같네요 ㅎㅎ 선이 늘어지길래..!


같은 CSS 명령어 지만, 브라우저 마다 다르게 해석하거나,


지원하는 방법이 틀린 것들이 존재한다.


이는 CSS3의 웹표준이 아직 정해지지 않았기 때문이다.


따라서, 개발자들은 크로스 브라우징을 구현 해야한다.


방법은 브라우저 접두사를 사용하여


다양한 브라우저에 같은 결과를 내게끔 코딩한다.


아래의 접두사를 참고하자.


- webkit -          :  사파리, 크롬


- moz -             :  모질라, 파이어폭스


- o -                 :  오페라


- ms -               :  마이크로소프트


아래는 column-count라는 속성의 예시다.


브라우저 마다 아직 지원하는 방법이 틀리기 때문에 아래와 같이 사용해야 한다.


- webkit - column-count : 3;

- moz - column - count : 3;

column - count : 3; /* 표준이 정해 질 시 사용하게 될 속성. 브라우저에 따라 적용되지 않을 수 있다. */



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

HTML 캔버스 해상도  (2) 2017.07.27

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

Buy me a coffeeBuy me a coffee

+ Recent posts