From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../api/htmlcanvaselement/getcontext/index.html | 144 ++++++++++++ files/ko/web/api/htmlcanvaselement/index.html | 242 +++++++++++++++++++++ 2 files changed, 386 insertions(+) create mode 100644 files/ko/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/ko/web/api/htmlcanvaselement/index.html (limited to 'files/ko/web/api/htmlcanvaselement') diff --git a/files/ko/web/api/htmlcanvaselement/getcontext/index.html b/files/ko/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..89a54a2c1d --- /dev/null +++ b/files/ko/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,144 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +tags: + - API + - Canvas + - HTMLCanvasElement + - 레퍼런스 + - 메소드 +translation_of: Web/API/HTMLCanvasElement/getContext +--- +
{{APIRef("Canvas API")}}
+ +

HTMLCanvasElement.getContext() 메소드는 캔버스의 드로잉 컨텍스트를 반환합니다. 컨텍스트 식별자가 지원되지 않을 경우 {{jsxref("null")}}을 반환합니다.

+ +

동일한 캔버스 엘리먼트에서 나중에 이 메소드를 호출하면 동일한 contextType 인자와 함께 메소드가 마지막으로 호출되었을 때 반환된 것과 같이 동일한 드로잉 컨텍스트 인스턴스를 반환합니다. 다른 드로잉 컨텍스트 객체를 얻으려면 다른 contextType을 전달하거나 다른 캔버스 엘리먼트에서 메소드를 호출해야 합니다.

+ +

구문

+ +
var ctx = canvas.getContext(contextType);
+var ctx = canvas.getContext(contextType, contextAttributes);
+
+ +

파라미터

+ +
+
contextType
+
캔버스에 연관된 드로잉 컨텍스트를 정의하는 컨텍스트 식별자를 갖는 {{domxref("DOMString")}}입니다. 가능한 값은 다음과 같습니다. +
    +
  • "2d", 2차원 렌더링 컨텍스트를 나타내는 {{domxref("CanvasRenderingContext2D")}} 객체를 생성하게 합니다.
    • +
  • "webgl" (또는 "experimental-webgl"), 3차원 렌더링 컨텍스트를 나타내는 {{domxref("WebGLRenderingContext")}} 객체를 생성합니다. 이 컨텍스트는 WebGL 버전 1 (OpenGL ES 2.0)을 구현하는 브라우저에서만 사용가능합니다.
    • +
  • "webgl2", 3차원 렌더링 컨텍스트를 나타내는 {{domxref("WebGL2RenderingContext")}} 객체를 생성합니다. 이 컨텍스트는 WebGL 버전 2 (OpenGL ES 3.0)를 구현하는 브라우저에서만 사용가능합니다. {{experimental_inline}}
    • +
  • "bitmaprenderer", 캔버스의 컨텐츠를 주어진 {{domxref("ImageBitmap")}}으로 대체하기위한 기능만을 제공하는 {{domxref("ImageBitmapRenderingContext")}}를 생성합니다.
    • +
+ +
+

노트: 식별자 "experimental-webgl"은 WebGL의 새로운 구현에서 사용됩니다. 이러한 구현은 테스트 스위트 적합성을 아직 만족하지 못하며, 플랫폼 상의 그래픽 드라이버도 아직 불안정합니다. Khronos Group은 특정 적합성 규칙에 따라 WebGL 구현을 인증합니다.

+
+
+
contextAttributes
+
+

렌더링 컨텍스트를 생성할 때 몇 가지 컨텍스트 속성을 사용할 수 있습니다. 예를 들면:

+ + 
const gl = canvas.getContext('webgl', {
+  antialias: false,
+  depth: false
+});
+ 2d 컨텍스트 속성: + +
    +
  • alpha: 캔버스가 알파 채널을 포함하는지를 나타내는 불리언입니다. false로 설정할 경우, 브라우저는 이제 배경이 항상 투명하다는 것을 알기때문에 투명한 컨텐츠나 이미지를 그리는 속도를 높일수 있습니다.
    • +
  • {{non-standard_inline}} (Gecko 전용) willReadFrequently: 많은 다시 읽기 작업이 계획되어있는지 여부를 나타내는 불리언입니다. 이는 소프트웨어(하드웨어 가속 대신) 2D 캔버스의 사용을 강제하며 {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} 호출이 빈번할때 메모리를 절약할 수 있습니다. 이 옵션은 gfx.canvas.willReadFrequently.enable 플래그가 true(기본 값이며, B2G/Firefox OS에만 해당) 설정되었을 경우에만 사용가능합니다.
    • +
  • {{non-standard_inline}} (Blink only) storage: 어떤 스토리지가 사용되었는지를 나타내는 문자열입니다(기본값은 "persistent").
    • +
+ WebGL 컨텍스트 속성: + +
    +
  • alpha: 캔버스가 알파 버퍼를 포함하는지 여부를 나타내는 불리언입니다.
    • +
  • antialias: 안티 앨리어싱을 수행할지 여부를 나타내는 불리언입니다.
    • +
  • depth: 드로잉 버퍼가 최소 16 비트의 깊이 버퍼를 갖는지 여부를 나타내는 불리언입니다.
    • +
  • failIfMajorPerformanceCaveat: 시스템 성능이 낮을 경우에 컨텍스트를 생성할지 여부를 나타내는 불리언입니다.
    • +
  • powerPreference: WebGL 컨텍스트에 대해 적합한 GPU 구성이 무엇인지를 나타내는 유저 에이전트에 대한 힌트입니다. 가능한 값은 다음과 같습니다. +
      +
    • "default": 유저 에이전트가 가장 적합한 GPU 구성을 결정하도록 합니다. 기본 값입니다.
      • +
    • "high-performance": 전력 소비보다 렌더링 성능을 우선시합니다.
      • +
    • "low-power": 렌더링 성능보다 전력 절약을 우선시합니다.
      • +
    +
    • +
  • premultipliedAlpha: 페이지 컴포지터가 미리 곱해진 알파를 갖는 컬러를 포함하는 드로잉 버퍼를 가정할 것인지 여부를 나타내는 불리언입니다.
    • +
  • preserveDrawingBuffer: 값이 true일 경우 버퍼는 제거되지 않으며 값이 제거되거나 덮어쓰여지기 전까지 유지됩니다.
    • +
  • stencil: 드로잉 버퍼가 최소 8 비트의 스텐실 버퍼를 갖는지 여부를 나타내는 불리언입니다.
    • +
+
+
+ +

반환 값

+ +

{{domxref("RenderingContext")}}는 다음 중 하나입니다.

+ + + +

contextType이 가능한 드로잉 컨텍스트와 일치하지 않으면, null이 반환됩니다.

+ +

예시

+ +

다음 {{HTMLElement("canvas")}} 엘리먼트를 고려해볼 때:

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

다음 코드를 사용해 캔버스의 2d 컨텍스트를 얻을 수 있습니다.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+
+ +

이제 캔버스에 대한 2D 렌더링 컨텍스트를 갖고 있으며 이 안에 그릴 수 있습니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}최신 스냅샷 {{SpecName('HTML5 W3C')}} 이후에 변경사항 없음
{{SpecName('HTML5.1', "semantics-scripting.html#dom-htmlcanvaselement-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}초기 정의를 포함하는 {{SpecName('HTML WHATWG')}}의 스냅샷.
+ +

브라우저 호환성

+ + + +

{{Compat("api.HTMLCanvasElement.getContext")}}

+ +

함께 보기

+ + diff --git a/files/ko/web/api/htmlcanvaselement/index.html b/files/ko/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..cd8c23eb12 --- /dev/null +++ b/files/ko/web/api/htmlcanvaselement/index.html @@ -0,0 +1,242 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

HTMLCanvasElement 인터페이스는 <canvas> 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 HTMLCanvasElement 인터페이스는 {{domxref("HTMLElement")}} 인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.

+ +

프로퍼티

+ +

부모객체인 {{domxref("HTMLElement")}} 로부터 프로퍼티를 상속받음.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("height", "canvas")}}를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 150이 사용됩니다.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("moz-opaque", "canvas")}}를 반영하는 {{jsxref("Boolean")}} 객체입니다. 이는 <canvas>에게 반투명이 인자로 사용될지에 대한 여부를 알려줍니다. 만약 반투명 요소가 없다면, <canvas>의 성능이 최적화될 수 있습니다.
+
{{domxref("HTMLCanvasElement.width")}}
+
는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("width", "canvas")}}를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다.  속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 300이 사용됩니다.
+
{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}
+
는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 자바스크립트 함수를 등록함으로써, 만약 프린터가 사용되는 경우 <canvas>를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. 다음의 블로그 글을 참조하세요.
+
 
+
+ +

메서드

+ +

부모객체인 {{domxref("HTMLElement")}} 로부터 메서드를 상속받음.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
<canvas> 상의 화면을 실시간 비디오로 캡처할 수 있는 {{domxref("CanvasCaptureMediaStream")}} 을 반환합니다.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
<canvas> 상의 드로잉 컨텍스트를 반환합니다. 만약 컨텍스트 ID가 지원되지 않는 경우 null값을 반환합니다. 드로잉 컨텍스트는 <canvas> 상에 그림을 그릴 수 있게 해줍니다.  getContext를 "2d" 를 매개 변수로 호출한다면 {{domxref("CanvasRenderingContext2D")}} 객체를 반환할 것이며, "experimental-webgl" (또는 "webgl") 를 매개 변수로 호출한다면 {{domxref("WebGLRenderingContext")}} 객체를 반환할 것입니다. 후자의 컨텍스트의 경우 WebGL 이 구현된 브라우저에서만 사용 가능합니다.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
type 파라미터에서 지정하고 있는 포맷(기본: png) 의 이미지를 나타내는 data-URL을 반환합니다. 반환된 이미지는 96dpi의 해상도를 갖습니다.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
<canvas>가 포함하고 있는 이미지를 나타내는 {{domxref("Blob")}} 객체를 생성합니다. 이 파일은 사용자의 브라우저에 따라 디스크나 메모리에 캐싱되거나 저장될 수 있습니다.
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
메인 쓰레드나 워커 쓰레드에서 {{domxref("OffscreenCanvas")}} 객체에게 제어 권한을 넘깁니다.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
<canvas>가 포함하고 있는 이미지를 나타내는 {{domxref("File")}} 객체를 반환합니다. 이 파일은 메모리 기반의 파일이며, name 의 이름을 갖습니다. 만약 type 이 지정되지 않는다면, 이미지는 기본적으로 image/png의 타입을 갖게 될 것입니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태주석
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}captureStream() 메서드 추가하기
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}} +

getContext() 메서드가 이제 단순히 객체를 반환하지 않고 {{domxref("RenderingContext")}} 를 반환함. 
+ 다음의 메서드가 추가됨: probablySupportsContext(), setContext() 와 transferControlToProxy()

+
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}초기 정의
+ +

브라우저 호환성

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob()50{{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587)50{{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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.

+ +

참조

+ + -- cgit v1.2.3-54-g00ecf