Develop/canvas

.getContext() - canvas 기본사용

GuriZzang 2015. 6. 30. 01:54

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에서 원문보기


'Develop > canvas' 카테고리의 다른 글

quadraticCurveTo() - 2차 베지어 곡선  (0) 2015.06.30
arcs - 원 혹은 호 그리기  (0) 2015.06.30
arc() - canvas 원그리기  (0) 2015.06.30
fillrect 선으로 도형그리기  (0) 2015.06.30
HTML5 Canvas  (0) 2015.06.30