Empty

하아....

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

제목 그대로 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

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

주의합시당

보통 html 문서를 컴파일할 때 css 파일이 있는 경우 이 파일 역시 컴파일 된다.

그리고나서 jQuery 를 이용해 어떤 html code를 삽입을 했는데 이미 css 파일이

한번 읽혀졌기 때문에 이 html code의 style은 정말 찾아볼수 없을 정도로 안 예쁘다. (필자의 경우 확 짜증이 난다)

이럴 때 html code를 한 뒤,

이 code를 가리킨만한 selector를 이용해 

$('selector').css(propertyName, value); 

요런 식으로 style을 입힐 수 있다. - 깨닫고 나서 엄청 감동먹음orz

value 말고도 function(index, value) 함수도 가능한듯. (자세한 예제는 http://api.jquery.com/css/ - only 영어)

꼭 이런 경우가 아니더라도 어떤 event가 발생했을 때 style을 바꾸는 아주 단순한 경우에도 쓰인다.ㅎㅎ

(예를 들어 버튼을 클릭했더니 글씨가 커진다던가, 배경색이 바뀐다던가 등)

뭔가 아리송한 건 .css(map) 인데 자세한 예제도, 설명도 없는 것 같아서 일단 PASS -

그리고... 내게 신세계를 열어준 jQueryUI (http://jqueryui.com/) .......

솔직히 UI API 라는 게 굉장히.. 뭐랄까 편리하면서도 제한적이라 좀 찜찜하지만 overwrite 가능하니까

결론은 편리하고 예.... 예뻐~~~~~ 흐흐흐

아코디언 타입의 메뉴 펼침 같은 경우 요렇게. 그 외에 많은 UI를 지원해서 한번 맛들리면 

직접 수작업하기 매우 귀찮아지는 경향이 생긴다는게 단점이랄까.

사이트 들어가서 요리조리 해봤는데 확실히 UI 사이트라 그런지 http://www.w3schools.com/ 보다 

훨씬 Test 하기도편한 것 같고 아기자기(색상, 폰트, 형태 등 전체적으로) 하면서도 예제 코드도 보기 잘해놨당 :D

jQuery 기본기도 없는 상태에서 코드가 굉장히 정신없어서.. 솔직히 처음엔 좀 많이 회의적이었는데

이렇게 또 써보니까 조금씩 재미를 붙이고 있다 ㅋㅋㅋ 한번 시도해 볼 가치가 있는 듯 하다.

게다가 지금 Node.js (한빛미디어) 책을 보고 있는데 온통 jQuery 코드라서 이해하려면 필수인듯 orz

 참고 : http://api.jquery.com 

★ val() : Form Element 의 값을 받아오는데 쓰인다. (주로 input 이나 textarea 정도?)

- 주의해야할 점은 Form Element 이외의 값은 받아오질 못한다는 점.

★ val(value) : value의 경우 string 또는 string의 배열(이 경우 value들의 matching을 잘 시켜야 오류를 피할 수 있다) 

또는 함수(function(index, value) 이런 형태)로 넣을 수 있다.

이 함수 역시 Form Element의 Value 값을 Set할 때 주로 쓰인다.

● text() : XML과 HTML 문서에서 둘다 사용될 수 있다. input elements 의 value를 받아오지 못한다(이 경우 val을 사용)

아주 쉬운 예로 <button>1</button> <button>2</button> <button>3</button> : button 대신 li 라던가.

$('button').text() 의 결과는 1 2 3 이다. 이런 식으로 사용된다. 

tag attribute의 value가 아니라(대표적으로 form 요소들) <tag>_____</tag>에서 _____에 해당하는 value를 get한다.

참고 사이트에 의하면 The .text() method cannot be used on form inputs or scripts. 

라고 적혀있다. ( form inputs 의 경우 val()를 말하는 거고 scripts 의 경우 html()을 가르킨다. )

● text(value) : textString 또는 함수(function(index, text) 이런 형태)로 넣을 수 있다. 이 역시 Set 하기위해 쓰인다.

◆ html() : XML 문서는 사용 불가, HTML만 가능. value가 아니라 html code(contents)자체를 get한다.

class 네임이 여러 개 매칭되는 경우 제일 처음 매칭되는 class 안에 속하는 html code만 가져온다.

api 설명에 의하면 IE의 경우 알파벳 문자를 포함하고 있는 속성값들의 경우 " ' " (quote)를 빼먹고 get 할 수도 있다고 한다.

◆ html(value) : htmlString 또는 함수(function(index, oldhtml) 이런 형태)로 넣을 수 있다. 이 역시 Set 하기위해 쓰인다.

class 네임이 여러 개 매칭되는 경우 매칭되는 모든 class 내부에 html code를 삽입.

만약 class 내부에 이미 어떤 code가 삽입되있는 경우, Set 할 html code로 완전히 Replace 해버린다.