HTML5의 Canvas는 스타일을 외부에서 하는것과 직접하는것의 차이가 있는건가요 ?
글쓴이: kawein / 작성시간: 금, 2015/08/07 - 4:38오전
3개의 그림을 첨부했습니다.
현재 작성된 코드와 [ 1.png ]
외부에서 태그를 이용해서 위치및 크기를 지정했을때와 [ 2.png ]
내부에서 태그속에 width, height 속성을 지정했을때의 실행 결과를 캡쳐한 그림파일 입니다.[ 3.png ]
실행 결과는 Canvas 의 drawImage 함수를 이용해서 이미지를 그렸을때의 결과인데 보시는바와 같이 큰 차이점이
태그 내부속에 속성을 지정하면 이미지 전체가 캔버스에 그려지는 반면, 태그 외부에서 style을 지정하면 그림의 일부분만 확대되어 그려지고 나머지 부분은
그려지지 않네요. 태그 내부에 속성을 지정하면 코드가 지저분해 보여서 잘 사용하지 않았는데... 무슨차이가 있는지 궁금합니다.
Forums:
Canvas 태그에 width, height를
Canvas 태그에 width, height를 지정하지 않으면 기본 사이즈 (300px by 150px)를 사용하게 됩니다.
이 상태에서 CSS로 Canvas 크기를 800px by 600px로 지정하면, 브라우저 상에는 800px, 600px를 차지하게 됩니다만, canvas 내부 좌표계는 300px by 150px가 전체인 좌표를 사용하게 됩니다.
그래서 최종 결과물은 확대된 상태로 나오게 됩니다.
Canvas가 사용할 좌표계의 크기를 canvas 태그에 직접 작성하는게 구조상 깔끔하지 않다면, JavaScript로 지정해도 됩니다.
댓글 달기