[Canvas] canvas 2. 기본사용법.

기본사용법.

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

캔바스는 기본적으로 위와같이 사용하게 됩니다. 

HTML 엘레멘트 공통인 ID attribute를 빼면 width , height 두가지 요소만 가지고 있는 셈입니다.

가로세로 크기를 지정하지않으면 기본적으로 300*150의 공간을 가지고 있고

자바스크립트,CSS어느것으로도 쉽게 캔버스를 컨트롤 할수있습니다.

CSS로는 일반적인 이미지 태그처럼 추가적인 각종 스타일을 지정할수 있습니다.(margin,border,background 등등)

대체 속성

canvas는 기본적으로 지원하는 브라우저가 아직까지는 일반적이지는 않기때문에 지원하지 않는 브라우저를위해

아주 간단하게 대체 문구나 이미지등을 삽입 할수 있게 되어 있습니다.

1. <canvas id="stockGraph" width="150" height="150">  
2.   current stock price: $3.15 +0.15  
3. </canvas>  
4.   
5. <canvas id="clock" width="150" height="150">  
6.   <img src="images/clock.png" width="150" height="150" alt=""/>  
7. </canvas>  

위의 두가지 canvas 요소들은 각각 canvas를 지원하지 않는 브라우저에서 보았을경우

current stock price: $3.15 +0.15 

이런텍스트를 출력하거나

<img src="images/clock.png" width="150" height="150" alt=""/>

이런 이미지를 출력하게 됩니다. 

그리고 당연한 얘기지만. 대체속성이 필요없다고 하더라도 </canvas>는 항상 붙여야 합니다.