링크: Basic usage of canvas
canvas elements
<canvas id="tutorial" width="150" height="150"></canvas>
<img>
엘리먼트와 비슷하나 src
, alt
가 없으며 width
, height
요소를 가지고 있는것이 특징이다. 기본값으로 300 width, 150px height를 가지며 DOM properties로 설정할 수 있다.
- 두 요소는 css로 조정할 수 있지만 렌더링하는 동안 이미지가 레이아웃에 맞게 조정된다. 초기 캔버스의 비율을 준수하지 않으면 왜곡되어 나타납니다.
- 요소에 스타일을 지정할 수 있으나 실제 canvas에 영향을 미치지는 않는다.
Fallback content
<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>
- IE9 이하에서 사용할 수 없으므로
<video><audio><picture>
등의 대체곤텐츠를 사용해야 한다.
- 위와같이
<canvas>
태그 안에 해당 콘텐츠를 입력하면 된다.
The rendering context
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
- canvas는 빈 상태로 시작한다. 무언가를 표시하려면 스크립트가 렌더링 컨텍스트에 엑세스하고 그 위에 그려야 한다.
- getContext()메서드로 렌더링 컨텍스트에 접근할 수 있다.
getContext("2d")로 2d그래픽을 그리거나 수정할 수 있다.
- 'tutorial'이란
<canvas>
를 선택하고 렌더링 컨텍스트에 엑세스하기 위해 getContext('2d')
를 실행한다.
Checking for support
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
} else {
}
canvas.getContext
로 <canvas>
가 지원되는지를 확인할 수 있다.