HTMLCanvasElement
HTMLCanvasElement
인터페이스는 <canvas> 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 HTMLCanvasElement
인터페이스는 HTMLElement
인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.
프로퍼티
부모객체인 HTMLElement
로부터 프로퍼티를 상속받음.
HTMLCanvasElement.height
(en-US)- 는
<canvas>
요소에서 HTML 속성인height
를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 150이 사용됩니다. HTMLCanvasElement.mozOpaque
(en-US) Non-Standard- 는
<canvas>
요소에서 HTML 속성인moz-opaque
를 반영하는Boolean
객체입니다. 이는 <canvas>에게 반투명이 인자로 사용될지에 대한 여부를 알려줍니다. 만약 반투명 요소가 없다면, <canvas>의 성능이 최적화될 수 있습니다. HTMLCanvasElement.width
(en-US)- 는
<canvas>
요소에서 HTML 속성인width
를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 300이 사용됩니다. HTMLCanvasElement.mozPrintCallback
Non-Standard- 는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 자바스크립트 함수를 등록함으로써, 만약 프린터가 사용되는 경우 <canvas>를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. 다음의 블로그 글을 참조하세요.
메서드
부모객체인 HTMLElement
로부터 메서드를 상속받음.
HTMLCanvasElement.captureStream()
(en-US) Experimental- <canvas> 상의 화면을 실시간 비디오로 캡처할 수 있는
CanvasCaptureMediaStream
(en-US) 을 반환합니다. HTMLCanvasElement.getContext()
- <canvas> 상의 드로잉 컨텍스트를 반환합니다. 만약 컨텍스트 ID가 지원되지 않는 경우 null값을 반환합니다. 드로잉 컨텍스트는 <canvas> 상에 그림을 그릴 수 있게 해줍니다. getContext를
"2d"
를 매개 변수로 호출한다면CanvasRenderingContext2D
(en-US) 객체를 반환할 것이며,"experimental-webgl"
(또는"webgl"
) 를 매개 변수로 호출한다면WebGLRenderingContext
(en-US) 객체를 반환할 것입니다. 후자의 컨텍스트의 경우 WebGL 이 구현된 브라우저에서만 사용 가능합니다. HTMLCanvasElement.toDataURL()
(en-US)type
파라미터에서 지정하고 있는 포맷(기본: png) 의 이미지를 나타내는 data-URL을 반환합니다. 반환된 이미지는 96dpi의 해상도를 갖습니다.HTMLCanvasElement.toBlob()
(en-US)- <canvas>가 포함하고 있는 이미지를 나타내는
Blob
객체를 생성합니다. 이 파일은 사용자의 브라우저에 따라 디스크나 메모리에 캐싱되거나 저장될 수 있습니다. HTMLCanvasElement.transferControlToOffscreen()
(en-US) Experimental- 메인 쓰레드나 워커 쓰레드에서
OffscreenCanvas
객체에게 제어 권한을 넘깁니다. HTMLCanvasElement.mozGetAsFile()
(en-US) Non-Standard Deprecated- <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 | 초기 정의 |
브라우저 호환성
BCD tables only load in the browser
참조
- 이 인터페이스를 구현한 HTML 요소:
<canvas>
.