.getContext() - canvas 기본사용

guriZzang.com에서 더 많은 html5, canvas의 튜토리얼을 보실 수 있습니다.

guriZzang.com 스터디블로그 바로가기

<canvas> 요소

?

1	<canvas id="tutorial" width="150" height="150"></canvas>

DOM표현식으로 id로 요소 선택이 가능합니다.

대체 콘텐츠

?

1 2 3 4 5 6 7

<canvas id="stockGraph" width="150" height="150">   current stock price: $3.15 +0.15 </canvas>   <canvas id="clock" width="150" height="150">   <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>

<img>태그와는 다르게 <video>,<audio>,<picture>등의 요소를 지원하니 않는 브라우저(ie9이하)에서는 대체 컨텐츠를 제공 합니다.

<canvas></canvas> 태그 사이의 내용들이 출력이 되며 </canvas>는 필수 요소 태그 입니다.

가령 <input />처럼 <canvas id="" />로 종료 한다면 뒤에오는 모든 요소들을 대체콘텐츠로 인식하고 출력이 되지 않습니다.

guriZzang.com에서 더 많은 html5, canvas의 튜토리얼을 보실 수 있습니다.

guriZzang.com 스터디블로그

원문 : guriZzang.com에서 원문보기