JavaScript 입문 : Canvas 이론 정리 - 모던나이저 사용방법 및 Canvas 지원 브라우저 확인

 

Canvas에 대해 어느정도 공부를 하고 내용을 파악해 보았지만 하나의 매뉴얼로 일목요연하게 정리를 해 보고 싶어 졌습니다. 물론 구체적으로 공부할 내용은 엄청 많지만.. 간단히 순서를 정리한 강좌를 기본으로 기초부분에서 놓친 부분이 없나 확인도 할겸 정리를 해보고자 합니다. 

 

관련 내용은 '1분코딩 HTML5 Canvas 라이브 강좌'를 기본으로 정리 하였습니다. 

 

1. Canvas 이론 

 

하나하나 세밀히 공부하고자 하는 분은 Canvas MDN을 링크합니다. 대부분의 강좌도 이것을 베이스로 하더군요.

 

Canvas API - Web API | MDN (mozilla.org)

Canvas API - Web API | MDN

 

 

2. Canvas 지원 브라우저 확인 

 

HTML5 이상에서 Canvas를 지원하니 구형 익스플로러 같은 브라우저는 지원을 하지 않겠죠. 요즘은 워낙 컴퓨터 하드웨어가 좋기때문에 대부분 지원하는 걸로 알고 있습니다만.

 

모던나이저(Modernizr) 에서는 해당 브라우저에서 어떤 것을 지원하는지 알 수 있습니다. 보면 모던나이저 홈페이지에서 사용법을 보도록 하겠습니다.

 

Modernizr: the feature detection library for HTML5/CSS3

Modernizr: the feature detection library for HTML5/CSS3

 

① 홈페이지 > Download

 

홈페이지에 접속하고 다운로드 페이지로 이동하면 확인이 가능한 항목들이 보입니다. 우리는 Canvas를 지원하는지 확인할 예정으로 Canvas를 지정합니다. 그리고 BUILD 합니다. 

 

 

② Build > Copy to Clipboard

 

Build를 하면 다음과 같이 클립보드에 카피할건지 내용을 다운로드 할건지 나오는데 어떤것을 해도 무방합니다만 VS Code같은 편집기에서 modernizr.js 파일을 만들고 붙혀넣기 해 보갰습니다. 

 

 

 

③ modernizr.js 파일 

 

다음과 같이 붙혀넣기 하면 자동으로 완성됩니다. 이 파일을 만들고자 하는 HTML에서 script를 통해 확인할 수 있습니다. 

 

 

 

3. Canvas  지원 브라우저 확인 

 

모던나이저를 이용한 Canvas 지원여부를 보도록 하겠습니다.

같은 폴더내 modernizr.js파일을 만들고 script src로 연결합니다. 다음과 같이 if문으로 확인할 수 있습니다. 

 

 

 

다음은 getContext를 이용하여 파악할 수도 있습니다. 

 

 

향후 Canvas는 이 두번째 방식으로 사용될 예정입니다.