하아....

정말 어제 하루 종일 뻘짓을 달리고나서 포스팅을 하게됐다.

제목 그대로 HTML5 Canvas Element 를 사용할 때 주의할 점이 있다.


Canvas 요소에 관련된 예제들은 인터넷에 널리고 깔리고 w3schools.com 에도 잘 나와있지만

제대로 안 읽으면 나처럼 뻘짓을 하게 된다.......... OTZ

무턱대로 Canvas 를 썼다가 원하는 결과가 안 나오고 그 원인조차 못 찾으면 정말 미친다.


그 경우 이 Note 에 주의해야한다.



아래에 보면 밑줄 친 Note 에 꼭 주의하자.

반드시 Id, Width, Height 속성 값을 명시해줘야 한다. 

안 그러면 결과가 엉망진창인데다 나처럼 하루종일 뻘짓하게 된다.

( 그런데 필요에 따라 id 값은 반드시 꼭 붙일 필요는 없는 듯.. 하지만 width, height 명시는 반드시 해주자 )


이.렇.게.

왼쪽은 img 태그 사용한 결과,  오른쪽은 canvas를 그릇되게 사용한 결과.(drawImage 태그로 뿌려준 결과)

- canvas 에서 width 와 height 값을 명시하지 않을 경우 이 따위 결과가...orz 사용법을 잘 읽고 사용합시다.


이미지를 제대로 뿌려주기 위해서는 canvas의 width, height 속성 값이 뿌려줄 이미지 크기와 같아야만 한다.

( ※ 여기서 주의해야할 점은 canvas의 width, height 속성 값이지, 

 style(css)의 width, height 값이 아니다. )


나같은 경우, 여러 이미지를 갖고 계속 테스트를 해봤는데 width, height 를 css 로 조절을 하다보니까

계속 이상한 결과를 얻게 되고 - jQuery 를 사용하다 보니 .css() 함수로 조절했었는데..

'아니, 이미지 크기가 같게 변환을 해줬는데도 왜 안되는 거임? AO 빡쳐' 하다가 어쩌다보니

.attr() 함수를 찾고 해보니까 정말 매우 아름다운 결과를 얻었다. 하루종일 뻘짓하다보니 감격 T^T 엉엉orz


암튼 모두 주의합시다. 혹시나 나처럼 뻘짓하시는 분들 계실까 해서 포스팅 해봅니다. (울 이쁜 냥이에게 이 영광을)



마지막으로 주의해야할 점이 있다면 context.drawImage() 를 쓸 때 반드시

이미지가 다 로딩이 된 다음에 메소드를 실행해야지, 안 그러면 원하는 결과를 얻기가 어렵다.

이 얘기는 어느 블로거님의 포스팅을 읽고 알고는 있었는데, 여러 테스트(?)를 거쳐본 결과

onload 하고 drawImage() 를 걸어놨는데 그래도 가끔씩 이미지가 뻑나서... 완전한 솔루션은 못 찾았지만

메소드를 약간 천천히 유도(?)하면 - 예를 들어 이미지 로딩하는 데 0.4초 걸리는데 클릭을 0.5초 뒤에 한다던가.

정상적으로 뿌려진다. 워낙 테스트를 많이 하다보니까 테스트를 매우 빠른 속도로 하게 되는데 그때마다 거의 이미지가 뻑났다.

그래서 조금 천천히 테스트를 해보니까 대부분 정상적으로 뜨는 듯. 약간 애매하다.


뭐 어쨌든 그래도 해결해서 다행 ㅠㅠ


뜬금없지만 프로그래머든 뭐든 진짜 경험치가 높아야 하는 것 같다..... 

흑 정말 이거 찾아내느라고 12시간 넘게 붙들고 있었으니 orz


암튼 사용법을 정확히 알고 써야지 함부로 오남용은 ㄴㄴ

주의합시당


'Programming' 카테고리의 다른 글

Delegate (대리자)  (1) 2013.12.20
[Python, C#]Lambda Form  (0) 2013.12.19
PHP vs. Ruby vs. Python  (0) 2013.12.19
jQuery : css() 그리고 jQuery UI 소개  (0) 2013.01.02
jQuery : val(), text(), html()의 차이  (2) 2013.01.02
by kelicia 2013. 1. 11. 00:35
| 1 |