HTMLCanvasElement 인터페이스는 <canvas> 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 HTMLCanvasElement 인터페이스는 HTMLElement 인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.
프로퍼티
부모객체인 HTMLElement 로부터 프로퍼티를 상속받음.
HTMLCanvasElement.height- 는
<canvas>요소에서 HTML 속성인height를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 150이 사용됩니다. HTMLCanvasElement.mozOpaque- 는
<canvas>요소에서 HTML 속성인moz-opaque를 반영하는Boolean객체입니다. 이는 <canvas>에게 반투명이 인자로 사용될지에 대한 여부를 알려줍니다. 만약 반투명 요소가 없다면, <canvas>의 성능이 최적화될 수 있습니다. HTMLCanvasElement.width- 는
<canvas>요소에서 HTML 속성인width를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 300이 사용됩니다. HTMLCanvasElement.mozPrintCallback- 는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 자바스크립트 함수를 등록함으로써, 만약 프린터가 사용되는 경우 <canvas>를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. 다음의 블로그 글을 참조하세요.
메서드
부모객체인 HTMLElement 로부터 메서드를 상속받음.
HTMLCanvasElement.captureStream()- <canvas> 상의 화면을 실시간 비디오로 캡처할 수 있는
CanvasCaptureMediaStream을 반환합니다. HTMLCanvasElement.getContext()- <canvas> 상의 드로잉 컨텍스트를 반환합니다. 만약 컨텍스트 ID가 지원되지 않는 경우 null값을 반환합니다. 드로잉 컨텍스트는 <canvas> 상에 그림을 그릴 수 있게 해줍니다. getContext를
"2d"를 매개 변수로 호출한다면CanvasRenderingContext2D객체를 반환할 것이며,"experimental-webgl"(또는"webgl") 를 매개 변수로 호출한다면WebGLRenderingContext객체를 반환할 것입니다. 후자의 컨텍스트의 경우 WebGL 이 구현된 브라우저에서만 사용 가능합니다. HTMLCanvasElement.toDataURL()type파라미터에서 지정하고 있는 포맷(기본: png) 의 이미지를 나타내는 data-URL을 반환합니다. 반환된 이미지는 96dpi의 해상도를 갖습니다.HTMLCanvasElement.toBlob()- <canvas>가 포함하고 있는 이미지를 나타내는
Blob객체를 생성합니다. 이 파일은 사용자의 브라우저에 따라 디스크나 메모리에 캐싱되거나 저장될 수 있습니다. HTMLCanvasElement.transferControlToOffscreen()- 메인 쓰레드나 워커 쓰레드에서
OffscreenCanvas객체에게 제어 권한을 넘깁니다. HTMLCanvasElement.mozGetAsFile()- <canvas>가 포함하고 있는 이미지를 나타내는
File객체를 반환합니다. 이 파일은 메모리 기반의 파일이며,name의 이름을 갖습니다. 만약type이 지정되지 않는다면, 이미지는 기본적으로image/png의 타입을 갖게 될 것입니다.
명세
| 명세 | 상태 | 주석 |
|---|---|---|
| Media Capture from DOM Elements The definition of 'HTMLCanvasElement' in that specification. |
Working Draft | captureStream() 메서드 추가하기 |
| HTML Living Standard The definition of 'HTMLCanvasElement' in that specification. |
Living Standard |
|
| HTML 5.1 The definition of 'HTMLCanvasElement' in that specification. |
Recommendation | |
| HTML5 The definition of 'HTMLCanvasElement' in that specification. |
Recommendation | 초기 정의 |
브라우저 호환성
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support (2D context) |
4.0 | 3.6 (1.9.2) | 9.0 | 9.0 [1] | 3.1 |
toBlob() |
50 | 19 (19) [2] | ? | ? | No support (bug 71270) |
probablySupportsContext(),setContext(),transferControlToProxy() |
No support | No support | No support | No support | No support |
mozGetAsFile() |
No support | 4.0 (2) | No support | No support | No support |
captureStream() |
No support | 41 (41) | No support | No support | No support |
transferControlToOffscreen() |
No support | 44 (44) [3] | No support | No support | No support |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support (2D context) |
2.1 | (Yes) | (Yes) | ? | 10.0 [1] | 3.2 |
webgl context |
? | ? | (Yes) as experimental-webgl |
? | ? | ? |
toBlob() |
No support (bug 67587) | 50 | 18.0 (18) [2] | ? | ? | No support (bug 71270) |
probablySupportsContext(),setContext(),transferControlToProxy() |
No support | No support | No support | No support | No support | No support |
mozGetAsFile() |
No support | No support | 4.0 (2) | No support | No support | No support |
captureStream() |
No support | No support | 41.0 (41) | No support | No support | No support |
transferControlToOffscreen() |
No support | No support | 44.0 (44) [3] | No support | No support | No support |
[1] Opera Mini 5.0 and later has partial support.
[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.
[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.
참조
- 이 인터페이스를 구현한 HTML 요소:
<canvas>.