<canvas>

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

개요

HTML <canvas> 요소는 스크립트 언어(보통은  자바스크립트를 사용)를 통해 그림을 그리는 데에 사용될 수 있습니다. 예를 들면, 그래프를 그리거나, 사진을 합성하거나, 애니메이션을 만들 때도 사용될 수 있습니다. <canvas>를 지원하지 않는 웹브라우저 혹은 자바스크립트 기능을 비활성화해 놓은 웹브라우저를 위해 대체할 내용을 마련해 놓으면 좋습니다.

캔버스에 대한 더 자세한 내용은 canvas topic page에서 확인하세요.

속성

이 요소는 전역 속성을 포함합니다.

height
CSS 픽셀 좌표 공간의 높이입니다. 기본값은 150입니다.
moz-opaque
Lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.
width
CSS 픽셀 좌표 공간의 폭입니다. 기본값은 300입니다.

표시되는 캔버스의 크기는 스타일시트에 의해 변경될수 있습니다. 이미지는 스타일된 사이즈에 맞게 렌더링되는동안 조정됩니다.

예제

<canvas id="canvas" width="300" height="300">
  이 웹 브라우저가 &lt;canvas&gt;를 지원하지 않습니다.
</canvas>

만약 당신이 캔버스를 사용하고, 투명할 필요가 없다면, moz-opaque 속성을 canvas 태그에 설정하면 됩니다. 이 정보는 렌더링을 최적화하는데에 내부적으로 사용될수 있습니다. 하지만, 이 속성은 아직 표준화 되지 않았고, 모질라 기반 렌더링 엔진에서만 작동합니다.

<canvas id="mycanvas" moz-opaque></canvas>

사양

사양 상태 주석
WHATWG HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard  
HTML5
The definition of '<canvas>' in that specification.
Recommendation  

웹 브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.5 (1.8) [1][2][3] 9.0 9.0 2.0
moz-opaque Not supported 3.5 (1.9.1) Not supported Not supported Not supported
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (1.8) ? ? ? 1.0
moz-opaque 1.0 (1.9.1) Not supported Not supported Not supported Not supported

특정 브라우저 주의사항

Firefox (Gecko)

[1] Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 이전에는, canvas의 가로 세로 길이는 부호없는 정수형 대신에 부호있는 정수였습니다.

[2] Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 이전에는, <canvas> 요소의 가로 혹은 세로 길이가 0일경우,  기본 치수로 렌더링 됐었습니다.

[3] 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 이전에, 자바스크립트가 비활성화 되있다면, <canvas> 요소는 사양에 따라 대체 내용을 보여주는것 대신에 렌더링 하였습니다.  이제 대체 내용이 대신 렌더링 됩니다.

이것도 보세요

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: azunyan3, AlwaysOnce
 최종 변경: azunyan3,