<canvas>태그를 이용한 리사이징(1)

unow30·2022년 3월 22일
0

링크: 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');
  // drawing code here
} else {
  // canvas-unsupported code here
}
  • canvas.getContext<canvas>가 지원되는지를 확인할 수 있다.

0개의 댓글