blob: 4e90bbf2941165483e558054569975be4f31b44f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: OffscreenCanvas
slug: Web/API/OffscreenCanvas
tags:
- API
- Canvas
- Experimental
- Interface
- Reference
translation_of: Web/API/OffscreenCanvas
---
<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
<p><strong><code>OffscreenCanvas</code></strong>는 화면 밖에서 렌더링되는 캔버스 인터페이스입니다. window 객체와 <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> 객체 모두 지원합니다.</p>
<h2 id="생성자">생성자</h2>
<dl>
<dt>{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}</dt>
<dd><code>OffscreenCanvas</code> 생성자. 새 <code>OffscreenCanvas</code> 객체를 생성합니다.</dd>
</dl>
<h2 id="프로퍼티">프로퍼티</h2>
<dl>
<dt>{{domxref("OffscreenCanvas.height")}}</dt>
<dd>캔버스의 높이</dd>
<dt>{{domxref("OffscreenCanvas.width")}}</dt>
<dd>캔버스의 너비</dd>
</dl>
<h2 id="메소드">메소드</h2>
<dl>
<dt>{{domxref("OffscreenCanvas.getContext()")}}</dt>
<dd>렌더링된 캔버스 컨텍스트 객체를 반환합니다.</dd>
</dl>
<dl>
<dt>{{domxref("OffscreenCanvas.convertToBlob()")}}</dt>
<dd>캔버스에 들어있는 이미지에 대한 {{domxref("Blob")}} 객체를 생성합니다.</dd>
</dl>
<dl>
<dt>{{domxref("OffscreenCanvas.transferToImageBitmap()")}}</dt>
<dd>OffscreenCanvas에 렌더링된 이미지중에서 가장 최근에 렌더링된 이미지를 {{domxref("ImageBitmap")}} 객체로 생성합니다.</dd>
</dl>
<h2 id="예시">예시</h2>
<h3 id="OffscreenCanvas_에서_만들어진_프레임을_동기적으로_화면에_보여주는_방법"><code>OffscreenCanvas</code> 에서 만들어진 프레임을 동기적으로 화면에 보여주는 방법</h3>
<p><code>OffscreenCanvas</code> API를 사용하는 방법은 <code>OffscreenCanvas</code>에 속한 {{domxref("RenderingContext")}}를 이용해 새로운 프레임 객체를 생성하는 것입니다. 새 프레임이 컨텍스트에 렌더링이 되고나면, 가장 최근에 렌더링 된 이미지를 저장하는 {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} 메소드를 호출할 수 있습니다. 이 메소드는 다른 수 많은 Web API에서 사용되고 있는 {{domxref("ImageBitmap")}} 객체를 리턴합니다.</p>
<p><code>ImageBitmap</code>을 화면에 표시하려면, 현재 (화면에 보여지고 있는) 캔버스 요소의 <code>canvas.getContext("bitmaprenderer")</code> 메소드를 호출했을 때 생성되는 {{domxref("ImageBitmapRenderingContext")}} 객체를 사용하면 됩니다. 이 컨텍스트는 캔버스의 내용을 주어진 <code>ImageBitmap</code>으로 전환하는 기능을 제공합니다. OffscreenCanvas에서 이전에 렌더링이 되어서 등록된 <code>ImageBitmap</code>을 이용한 {{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}}을 호출하면 <code>ImageBitmap</code>이 캔버스에 표시되고 소유권 역시 캔버스로 넘어갑니다. 단일 <code>OffscreenCanvas</code>는 프레임들을 임의의 다른 <code>ImageBitmapRenderingContext</code> 객체로 전달합니다.</p>
<p>아래에 두 개의 {{HTMLElement("canvas")}} 요소가 있습니다.</p>
<pre class="brush: html"><canvas id="one"></canvas>
<canvas id="two"></canvas></pre>
<p>다음의 코드는 위에서 설명한 것처럼 <code>OffscreenCanvas</code>를 이용해 렌더링합니다.</p>
<pre class="brush: js">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);
</pre>
<h3 id="OffscreenCanvas_에서_만들어진_프레임을_비동기적으로_화면에_보여주는_방법"><code>OffscreenCanvas</code> 에서 만들어진 프레임을 비동기적으로 화면에 보여주는 방법</h3>
<p><code>OffscreenCanvas</code> API를 이용하는 또 다른 방법은 <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> 또는 메인 스레드위에서 {{HTMLElement("canvas")}} 요소의 {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}}를 호출하는 것입니다. 여기서 메인 스레드는 <code>OffscreenCanvas</code> 객체를 반환하는 {{domxref("HTMLCanvasElement")}} 객체를 가지고 있습니다. {{domxref("OffscreenCanvas.getContext", "getContext()")}}를 호출하면 <code>OffscreenCanvas</code>에서 <code>RenderingContext</code>를 얻을 수 있습니다.</p>
<p>main.js (메인 스레드 코드):</p>
<pre class="brush: js">var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();
var worker = new Worker("offscreencanvas.js");
worker.postMessage({canvas: offscreen}, [offscreen]);
</pre>
<p>offscreencanvas.js (worker 코드):</p>
<pre class="brush: js">onmessage = function(evt) {
var canvas = evt.data.canvas;
var gl = canvas.getContext("webgl");
// ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
};
</pre>
<p>worker 내에서 requestAnimationFrame 또한 사용할 수 있습니다.</p>
<pre class="brush: js">onmessage = function(evt) {
const canvas = evt.data.canvas;
const gl = canvas.getContext("webgl");
function render(time) {
// ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
requestAnimationFrame(render);
}
requestAnimationFrame(render);
};</pre>
<h2 id="상세">상세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<div>
<p>{{Compat("api.OffscreenCanvas")}}</p>
</div>
<h2 id="더_보기">더 보기</h2>
<ul>
<li><a href="https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/">WebGL Off the Main Thread – Mozilla Hacks</a></li>
<li>{{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("ImageBitmap")}}</li>
<li>{{domxref("ImageBitmapRenderingContext")}}</li>
<li>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}</li>
<li>{{domxref("WebGLRenderingContext.commit()")}}</li>
</ul>
|
