canvas

설명

The Canvas (<canvas>) HTML element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations.

Canvas(<canvas>)는 HTML 의 요소로 스크립팅(보통 JavaScript) 을 이용해 그래픽들을 그리는데 사용될 수 있다. 예를 들어 그래프를 그릴 수 있고, 사진을 게제할 수 있고 심지어 애니메이션을 수행할 수 있다.

유화를 그리기 위한 흰 색 천을 우리는 '캔버스' 라고 부른다. 그 천 위에 우리가 상상하는 그 어떤 것도 그릴 수 있다. 점 하나만 찍을 수도 검은 물감으로 전체를 채울 수도 있다. 또한 사람일 수도 풍경일 수도 아님 (운이 좋으면) 그래프일 수도 있다. 마찬가지로 표현되어지는 좌표내에 어떤 그래픽을 표현하기 위한 기본적인 공간이 바로 'Canvas' 이다.

Usage Context

Permitted content	Transparent content model, either Phrasing content or Flow content
Tag omission	None, both the start tag and end tag must be included
Permitted parent elements	Any element that accepts phrasing content or any element that accepts flow content.
Normative document	HTML 5, section 4.8.10

속성

Like all other HTML elements, this element supports the global attributes.

다른 모든 HTML 요소들과 같이 이 요소도 전역 속성을 지원한다.

width

The width of the coordinate space in CSS pixels. Defaults to 300.

width는 CSS pixel들안의 좌표 공간이다. 기본값은 300 pixel 이다.

height

The height of the coordinate space in CSS pixels. Defaults to 150.

height는 CSS pixel들안의 좌표공간이다. 기본값은 150 pixel 이다.

참고 :  The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size.

참고 : canvas의 표현되는 사이즈는 stylesheet의 사용에 따라 달라질 수 있다. 스타일된 사이즈에 맞는 렌더링을 하는 동안 이미지가 조정된다.

예제

    <canvas id="canvas" width="300" height="300">  
      Sorry, your browser doesn't support the &lt;canvas&gt; element.  
    </canvas>  

DOM Interface

HTMLCanvasElement

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	1.0	1.5(1.8)	9.0	9.0	1.0

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원	?	1.0 (1.8)	?	?	1.0

참고

• 원문 - https://developer.mozilla.org/en/HTML/Element/canvas
• Canvas topics