From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../web/api/offscreencanvas/getcontext/index.html | 117 ++++++++++++++++ files/ko/web/api/offscreencanvas/height/index.html | 63 +++++++++ files/ko/web/api/offscreencanvas/index.html | 153 +++++++++++++++++++++ .../api/offscreencanvas/offscreencanvas/index.html | 74 ++++++++++ files/ko/web/api/offscreencanvas/toblob/index.html | 77 +++++++++++ files/ko/web/api/offscreencanvas/width/index.html | 63 +++++++++ 6 files changed, 547 insertions(+) create mode 100644 files/ko/web/api/offscreencanvas/getcontext/index.html create mode 100644 files/ko/web/api/offscreencanvas/height/index.html create mode 100644 files/ko/web/api/offscreencanvas/index.html create mode 100644 files/ko/web/api/offscreencanvas/offscreencanvas/index.html create mode 100644 files/ko/web/api/offscreencanvas/toblob/index.html create mode 100644 files/ko/web/api/offscreencanvas/width/index.html (limited to 'files/ko/web/api/offscreencanvas') diff --git a/files/ko/web/api/offscreencanvas/getcontext/index.html b/files/ko/web/api/offscreencanvas/getcontext/index.html new file mode 100644 index 0000000000..de0015ac61 --- /dev/null +++ b/files/ko/web/api/offscreencanvas/getcontext/index.html @@ -0,0 +1,117 @@ +--- +title: OffscreenCanvas.getContext() +slug: Web/API/OffscreenCanvas/getContext +translation_of: Web/API/OffscreenCanvas/getContext +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

OffscreenCanvas.getContext() 메소드는 offscreen 캔버스를 위한 드로잉 컨텍스트 반환합니다. 컨텍스트 식별자가 지원되는 상황이 아닐 경우 {{jsxref("null")}}를 반환합니다.

+ +
+

Note: 이 API는 현재 WebGL1과 WebGL2 컨텍스트에서만 실행됩니다.  Canvas 2D API 관련 {{bug(801176)}}를 참조하세요.

+
+ +

구문

+ +
offscreen.getContext(contextType, contextAttributes);
+
+ +

매개 변수

+ +
+
contextType
+
캔버스의 드로잉 컨텍스트를 정의하는 컨텍스트 식별자가 포함된 {{domxref("DOMString")}}입니다: +
    +
  • "2d"는 2차원 렌더링 컨텍스트를 표현하는 {{domxref("CanvasRenderingContext2D")}} 객체를 생성합니다.
    • +
  • "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")}}를 생성합니다. 

    +
    • +
+ +

Note:"experimental-webgl"과 "experimental-webgl2" 식별자는 WebGL에서도 사용됩니다. 그러나 아직 테스트 적합성을 통과하지 못했거나 플랫폼별 그래픽 드라이버 지원이 안정적이진 않습니다. Khronos Group은 특정한  정합성 규칙에 WebGL 구현을 인증하고 있습니다.

+
+
contextAttributes
+
+

You can use several context attributes when creating your rendering context, for example:

+ + 
offscreen.getContext("webgl",
+                 { antialias: false,
+                   depth: false });
+ 2d context attributes: + +
    +
  • alpha: Boolean that indicates if the canvas contains an alpha channel. If set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.
    • +
  • {{non-standard_inline}} (Gecko only) willReadFrequently: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag gfx.canvas.willReadFrequently.enable is set to true (which, by default, is only the case for B2G/Firefox OS).
    • +
  • {{non-standard_inline}} (Blink only) storage: String that indicates which storage is used ("persistent" by default).
    • +
+ WebGL context attributes: + +
    +
  • alpha: Boolean that indicates if the canvas contains an alpha buffer.
    • +
  • depth: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.
    • +
  • stencil: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.
    • +
  • antialias: Boolean that indicates whether or not to perform anti-aliasing.
    • +
  • premultipliedAlpha: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
    • +
  • preserveDrawingBuffer: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.
    • +
  • +

    failIfMajorPerformanceCaveat: Boolean that indicates if a context will be created if the system performance is low.

    +
    • +
+
+
+ +

Return value

+ +

A {{domxref("RenderingContext")}} which is either a

+ + + +

If the contextType doesn't match a possible drawing context, null is returned.

+ +

Examples

+ +
var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext("webgl");
+
+gl; // WebGLRenderingContext
+gl.canvas; // OffscreenCanvas
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dom-offscreencanvas-getcontext", "OffscreenCanvas.getContext()")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/ko/web/api/offscreencanvas/height/index.html b/files/ko/web/api/offscreencanvas/height/index.html new file mode 100644 index 0000000000..9cf16b703f --- /dev/null +++ b/files/ko/web/api/offscreencanvas/height/index.html @@ -0,0 +1,63 @@ +--- +title: OffscreenCanvas.height +slug: Web/API/OffscreenCanvas/height +tags: + - API + - Canvas + - Experimental + - OffscreenCanvas + - Property + - Reference +translation_of: Web/API/OffscreenCanvas/height +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

height 프로퍼티는 {{domxref("OffscreenCanvas")}} 객체에 할당된 높이를 반환합니다.

+ +

구문

+ +
var pxl = offscreen.height;
+offscreen.height = pxl;
+ +
+
+ +

예시

+ +

새로운 offscreen 캔버스를 생성하고 높이를 설정하거나 반환합니다.

+ +
var offscreen = new OffscreenCanvas(256, 256);
+offscreen.height; // 256
+offscreen.height = 512;
+
+ +

상세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dom-offscreencanvas-height", "OffscreenCanvas.height")}}{{Spec2('HTML WHATWG')}} 
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.OffscreenCanvas.height")}}

+
+ +

더 보기

+ + diff --git a/files/ko/web/api/offscreencanvas/index.html b/files/ko/web/api/offscreencanvas/index.html new file mode 100644 index 0000000000..4e90bbf294 --- /dev/null +++ b/files/ko/web/api/offscreencanvas/index.html @@ -0,0 +1,153 @@ +--- +title: OffscreenCanvas +slug: Web/API/OffscreenCanvas +tags: + - API + - Canvas + - Experimental + - Interface + - Reference +translation_of: Web/API/OffscreenCanvas +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

OffscreenCanvas는 화면 밖에서 렌더링되는 캔버스 인터페이스입니다. window 객체와 worker 객체 모두 지원합니다.

+ +

생성자

+ +
+
{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
+
OffscreenCanvas 생성자. 새 OffscreenCanvas 객체를 생성합니다.
+
+ +

프로퍼티

+ +
+
{{domxref("OffscreenCanvas.height")}}
+
캔버스의 높이
+
{{domxref("OffscreenCanvas.width")}}
+
캔버스의 너비
+
+ +

메소드

+ +
+
{{domxref("OffscreenCanvas.getContext()")}}
+
렌더링된 캔버스 컨텍스트 객체를 반환합니다.
+
+ +
+
{{domxref("OffscreenCanvas.convertToBlob()")}}
+
캔버스에 들어있는 이미지에 대한 {{domxref("Blob")}} 객체를 생성합니다.
+
+ +
+
{{domxref("OffscreenCanvas.transferToImageBitmap()")}}
+
OffscreenCanvas에 렌더링된 이미지중에서 가장 최근에 렌더링된 이미지를 {{domxref("ImageBitmap")}} 객체로 생성합니다.
+
+ +

예시

+ +

OffscreenCanvas 에서 만들어진 프레임을 동기적으로 화면에 보여주는 방법

+ +

OffscreenCanvas API를 사용하는 방법은 OffscreenCanvas에 속한 {{domxref("RenderingContext")}}를 이용해 새로운 프레임 객체를 생성하는 것입니다. 새 프레임이 컨텍스트에 렌더링이 되고나면, 가장 최근에 렌더링 된 이미지를 저장하는 {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} 메소드를 호출할 수 있습니다. 이 메소드는 다른 수 많은 Web API에서 사용되고 있는 {{domxref("ImageBitmap")}} 객체를 리턴합니다.

+ +

ImageBitmap을 화면에 표시하려면, 현재 (화면에 보여지고 있는) 캔버스 요소의 canvas.getContext("bitmaprenderer") 메소드를 호출했을 때 생성되는 {{domxref("ImageBitmapRenderingContext")}} 객체를 사용하면 됩니다. 이 컨텍스트는 캔버스의 내용을 주어진 ImageBitmap으로 전환하는 기능을 제공합니다.  OffscreenCanvas에서 이전에 렌더링이 되어서 등록된 ImageBitmap을 이용한 {{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}}을 호출하면 ImageBitmap이 캔버스에 표시되고 소유권 역시 캔버스로 넘어갑니다. 단일 OffscreenCanvas는 프레임들을 임의의 다른 ImageBitmapRenderingContext 객체로 전달합니다.

+ +

아래에 두 개의 {{HTMLElement("canvas")}} 요소가 있습니다.

+ +
<canvas id="one"></canvas>
+<canvas id="two"></canvas>
+ +

다음의 코드는 위에서 설명한 것처럼 OffscreenCanvas를 이용해 렌더링합니다.

+ +
var one = document.getElementById("one").getContext("bitmaprenderer");
+var two = document.getElementById("two").getContext("bitmaprenderer");
+
+var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+
+// ... gl 컨텍스트를 이용해 첫 번째 캔버스에 무언가를 그립니다 ...
+
+// 첫 번째 캔버스에 렌더링을 수행합니다.
+var bitmapOne = offscreen.transferToImageBitmap();
+one.transferFromImageBitmap(bitmapOne);
+
+// ... gl 컨텍스트를 이용해 두 번째 캔버스에 무언가를 그립니다 ...
+
+// 두 번째 캔버스에 렌더링을 수행합니다.
+var bitmapTwo = offscreen.transferToImageBitmap();
+two.transferFromImageBitmap(bitmapTwo);
+
+ +

OffscreenCanvas 에서 만들어진 프레임을 비동기적으로 화면에 보여주는 방법

+ +

OffscreenCanvas API를 이용하는 또 다른 방법은  worker 또는 메인 스레드위에서 {{HTMLElement("canvas")}} 요소의 {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}}를 호출하는 것입니다. 여기서 메인 스레드는 OffscreenCanvas 객체를 반환하는 {{domxref("HTMLCanvasElement")}} 객체를 가지고 있습니다. {{domxref("OffscreenCanvas.getContext", "getContext()")}}를 호출하면 OffscreenCanvas에서 RenderingContext를 얻을 수 있습니다.

+ +

main.js (메인 스레드 코드):

+ +
var htmlCanvas = document.getElementById("canvas");
+var offscreen = htmlCanvas.transferControlToOffscreen();
+
+var worker = new Worker("offscreencanvas.js");
+worker.postMessage({canvas: offscreen}, [offscreen]);
+
+ +

offscreencanvas.js (worker 코드):

+ +
onmessage = function(evt) {
+  var canvas = evt.data.canvas;
+  var gl = canvas.getContext("webgl");
+
+  // ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
+};
+
+ +

worker 내에서 requestAnimationFrame 또한 사용할 수 있습니다.

+ +
onmessage = function(evt) {
+  const canvas = evt.data.canvas;
+  const gl = canvas.getContext("webgl");
+
+  function render(time) {
+    // ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+};
+ +

상세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}{{Spec2('HTML WHATWG')}} 
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.OffscreenCanvas")}}

+
+ +

더 보기

+ + diff --git a/files/ko/web/api/offscreencanvas/offscreencanvas/index.html b/files/ko/web/api/offscreencanvas/offscreencanvas/index.html new file mode 100644 index 0000000000..89c6f42062 --- /dev/null +++ b/files/ko/web/api/offscreencanvas/offscreencanvas/index.html @@ -0,0 +1,74 @@ +--- +title: OffscreenCanvas() +slug: Web/API/OffscreenCanvas/OffscreenCanvas +tags: + - API + - Canvas + - Constructor + - Experimental + - OffscreenCanvas + - Reference + - WebGL +translation_of: Web/API/OffscreenCanvas/OffscreenCanvas +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

OffscreenCanvas() 생성자는 새롭게 초기화된 {{domxref("OffscreenCanvas")}} 객체를 반환합니다.

+ +

 

+ +

구문

+ +
new OffscreenCanvas(width, height);
+
+ +

매개 변수

+ +
+
width
+
offscreen 캔버스의 너비
+
height
+
offscreen 캔버스의 높이
+
+ +
+
+ +

예시

+ +

이 예시는 OffscreenCanvas() 생성자를 이용해 새로운 offscreen 캔버스를 생성하고, WebGL 컨텍스트의 {{domxref("OffscreenCanvas.getContext()", "getContext()")}} 메소드를 사용해 초기화합니다.

+ +
let offscreen = new OffscreenCanvas(256, 256);
+let gl = offscreen.getContext('webgl');
+
+ +

상세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dom-offscreencanvas", "OffscreenCanvas()")}}{{Spec2('HTML WHATWG')}} 
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.OffscreenCanvas.OffscreenCanvas")}}

+
+ +

더 보기

+ + diff --git a/files/ko/web/api/offscreencanvas/toblob/index.html b/files/ko/web/api/offscreencanvas/toblob/index.html new file mode 100644 index 0000000000..e57eeecfbb --- /dev/null +++ b/files/ko/web/api/offscreencanvas/toblob/index.html @@ -0,0 +1,77 @@ +--- +title: OffscreenCanvas.convertToBlob() +slug: Web/API/OffscreenCanvas/toBlob +tags: + - API + - Canvas + - Experimental + - Method + - OffscreenCanvas + - Reference +translation_of: Web/API/OffscreenCanvas/toBlob +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

OffscreenCanvas.convertToBlob() 메소드는 캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 생성합니다.

+ +

구문

+ +
Promise<Blob> OffscreenCanvas.convertToBlob(options);
+ +

매개 변수

+ +
+
options {{optional_inline}}
+
+

객체를 {{domxref("Blob")}} 객체로 전환할 때 다양한 옵션을 줄 수 있습니다.

+ + 
const blob = offscreenCanvas.convertToBlob({
+  type: "image/jpeg",
+  quality: 0.95
+});
+ +

options:

+ +
    +
  • type: 이미지 포맷을 가리키는 {{domxref("DOMString")}}. 상세 타입은 image/png
    • +
  • quality: type 옵션이 image/jpeg 혹은 image/webp 일 때 이미지의 품질을 가리키는 0과 1사이의 {{jsxref("Number")}}. 이 매개 변수가 다른 값이라면, 이미지 품질의 기본 설정값이 적용됩니다. 다른 매개 변수들은 무시됩니다.
    • +
+
+
+ +

반환 값

+ +

캔버스에 포함된 이미지를 표현하는 {{domxref("Blob")}} 객체를 반환하는 {{jsxref("Promise")}}

+ +

예시

+ +
var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext("webgl");
+
+// ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
+
+offscreen.convertToBlob().then(function(blob) {
+  console.log(blob);
+});
+
+// Blob { size: 334, type: "image/png" }
+ +

상세

+ +

현재 작성되고 있는 중입니다: OffscreenCanvas.

+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.OffscreenCanvas.convertToBlob")}}

+
+ +

 

+ +

더 보기

+ + diff --git a/files/ko/web/api/offscreencanvas/width/index.html b/files/ko/web/api/offscreencanvas/width/index.html new file mode 100644 index 0000000000..e7d7440d28 --- /dev/null +++ b/files/ko/web/api/offscreencanvas/width/index.html @@ -0,0 +1,63 @@ +--- +title: OffscreenCanvas.width +slug: Web/API/OffscreenCanvas/width +tags: + - API + - Canvas + - Experimental + - OffscreenCanvas + - Property + - Reference +translation_of: Web/API/OffscreenCanvas/width +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

width 프로퍼티는 {{domxref("OffscreenCanvas")}} 객체에 할당된 너비를 반환합니다.

+ +

구문

+ +
var pxl = offscreen.width;
+offscreen.width = pxl;
+ +
+
+ +

예시

+ +

새로운 offscreen 캔버스를 생성하고 높이를 설정하거나 반환합니다.

+ +
var offscreen = new OffscreenCanvas(256, 256);
+offscreen.width; // 256
+offscreen.width = 512;
+
+ +

상세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dom-offscreencanvas-width", "OffscreenCanvas.width")}}{{Spec2('HTML WHATWG')}} 
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.OffscreenCanvas.width")}}

+
+ +

더 보기

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