From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/offscreencanvas/height/index.html | 56 +++++++ files/zh-cn/web/api/offscreencanvas/index.html | 172 +++++++++++++++++++++ .../api/offscreencanvas/offscreencanvas/index.html | 64 ++++++++ .../transfertoimagebitmap/index.html | 56 +++++++ 4 files changed, 348 insertions(+) create mode 100644 files/zh-cn/web/api/offscreencanvas/height/index.html create mode 100644 files/zh-cn/web/api/offscreencanvas/index.html create mode 100644 files/zh-cn/web/api/offscreencanvas/offscreencanvas/index.html create mode 100644 files/zh-cn/web/api/offscreencanvas/transfertoimagebitmap/index.html (limited to 'files/zh-cn/web/api/offscreencanvas') diff --git a/files/zh-cn/web/api/offscreencanvas/height/index.html b/files/zh-cn/web/api/offscreencanvas/height/index.html new file mode 100644 index 0000000000..2a221d696a --- /dev/null +++ b/files/zh-cn/web/api/offscreencanvas/height/index.html @@ -0,0 +1,56 @@ +--- +title: OffscreenCanvas.height +slug: Web/API/OffscreenCanvas/height +translation_of: Web/API/OffscreenCanvas/height +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

设置或者获取{{domxref("OffscreenCanvas")}} 对象的高度.

+ +

语法

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

例子

+ +

创建一个新的离屏 canvas，获取或者设置离屏 canvas 的高度：

+ +
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/zh-cn/web/api/offscreencanvas/index.html b/files/zh-cn/web/api/offscreencanvas/index.html new file mode 100644 index 0000000000..62a1869f98 --- /dev/null +++ b/files/zh-cn/web/api/offscreencanvas/index.html @@ -0,0 +1,172 @@ +--- +title: OffscreenCanvas +slug: Web/API/OffscreenCanvas +tags: + - API + - Canvas + - Experimental + - Interface + - Reference +translation_of: Web/API/OffscreenCanvas +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

OffscreenCanvas提供了一个可以脱离屏幕渲染的canvas对象。它在窗口环境和web worker环境均有效。

+ +

构造函数

+ +
+
{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
+
OffscreenCanvas构造函数。创建一个新的OffscreenCanvas对象。
+
+ +

属性

+ +
+
{{domxref("OffscreenCanvas.height")}}
+
offscreen canvas对象的高度。
+
{{domxref("OffscreenCanvas.width")}}
+
offscreen canvas对象的宽度。
+
+ +

方法

+ +
+
{{domxref("OffscreenCanvas.getContext()")}}
+
为offscreen canvas对象返回一个渲染画布。
+
+ +
+
{{domxref("OffscreenCanvas.toBlob()")}}
+
创建一个代表canvas中的图像的{{domxref("Blob")}}对象。
+
+ +
+
{{domxref("OffscreenCanvas.transferToImageBitmap()")}}
+
从OffscreenCanvas最近渲染的图像创建一个 {{domxref("ImageBitmap")}} 对象。
+
+ +

例子

+ +

同步显示OffscreenCanvas中的帧

+ +

一种方式是使用OffscreenCanvas API，也就是用已经包含OffscreenCanvas对象的{{domxref("RenderingContext")}} 来生成新的帧。 每次一个新的帧在画布中完成渲染，{{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} 方法都会被调用来保存最近渲染的图像。该方法返回一个{{domxref("ImageBitmap")}}对象，该对象可以被用在各种Web APIs中，也可以用在下一个canvas中，并且不需要转换备份。

+ +

为了显示ImageBitmap，你可以用{{domxref("ImageBitmapRenderingContext")}}上下文，通过一个canvas（可见的）元素调用canvas.getContext("bitmaprenderer")方法来创建它。该上下文只提供用ImageBitmap替换canvas的内容的功能。调用{{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}} 以前的渲染结果并且通过OffscreenCanvas保存ImageBitmap，会在canvas里显示ImageBitmap并且转换其所有权到canvas。 一个单独的OffscreenCanvas可以将帧转换到任意数量的其他ImageBitmapRenderingContext对象。

+ +

提供两个 {{HTMLElement("canvas")}} 元素

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

下面的代码会用OffscreenCanva提供渲染结果，就像上面描述的一样。

+ +
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');
+
+// ... some drawing for the first canvas using the gl context ...
+
+// Commit rendering to the first canvas
+var bitmapOne = offscreen.transferToImageBitmap();
+one.transferFromImageBitmap(bitmapOne);
+
+// ... some more drawing for the second canvas using the gl context ...
+
+// Commit rendering to the second canvas
+var bitmapTwo = offscreen.transferToImageBitmap();
+two.transferFromImageBitmap(bitmapTwo);
+
+ +

 异步显示OffscreenCanvas生成的帧

+ +

另一种使用 OffscreenCanvas API的方式, 是在一个{{HTMLElement("canvas")}}元素上调用{{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}}， 也可以在worker或主线程,上调用，这将从主线程的{{domxref("HTMLCanvasElement")}}对象返回一个OffscreenCanvas对象。调用{{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 (web work代码):

+ +
onmessage = function(evt) {
+  var canvas = evt.data.canvas.
+  var gl = canvas.getContext("webgl");
+
+  // ... some drawing using the gl context ...
+
+  // Push frames back to the original HTMLCanvasElement
+  gl.commit();
+};
+
+ +

也可以在 worker 中使用 requestAnimationFrame

+ +
onmessage = function(evt) {
+  const canvas = evt.data.canvas;
+  const gl = canvas.getContext("webgl");
+
+  function render(time) {
+    // ... some drawing using the gl context ...
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+};
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +
+ + +

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

+
+ +

另请参见

+ + + +
+ +
+
+
+
+ +
+ +
+
+ +
+
+
diff --git a/files/zh-cn/web/api/offscreencanvas/offscreencanvas/index.html b/files/zh-cn/web/api/offscreencanvas/offscreencanvas/index.html new file mode 100644 index 0000000000..a66335bf08 --- /dev/null +++ b/files/zh-cn/web/api/offscreencanvas/offscreencanvas/index.html @@ -0,0 +1,64 @@ +--- +title: OffscreenCanvas() +slug: Web/API/OffscreenCanvas/OffscreenCanvas +translation_of: Web/API/OffscreenCanvas/OffscreenCanvas +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

OffscreenCanvas()构造函数，返回一个新的OffscreenCanvas对象

+ +

语法

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

参数

+ +
+
width
+
离屏canvas 的高度
+
height
+
离屏canvas 的宽度
+
+ +
+
+ +

示例

+ +

创建一个离屏Canvas并且初始一个 WebGL 上下文:

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

规范

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

浏览器兼容性

+ +
+ + +

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

+
+ +

查看更多

+ + diff --git a/files/zh-cn/web/api/offscreencanvas/transfertoimagebitmap/index.html b/files/zh-cn/web/api/offscreencanvas/transfertoimagebitmap/index.html new file mode 100644 index 0000000000..47a1c39ff5 --- /dev/null +++ b/files/zh-cn/web/api/offscreencanvas/transfertoimagebitmap/index.html @@ -0,0 +1,56 @@ +--- +title: OffscreenCanvas.transferToImageBitmap() +slug: Web/API/OffscreenCanvas/transferToImageBitmap +translation_of: Web/API/OffscreenCanvas/transferToImageBitmap +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

OffscreenCanvas.transferToImageBitmap() 方法使用offscreenCanvas最近渲染得到的图片创建一个{{domxref("ImageBitmap")}} 对象.

+ +

语法

+ +
ImageBitmap OffscreenCanvas.transferToImageBitmap()
+ +

返回值

+ +

一个{{domxref("ImageBitmap")}}对象.

+ +

例子

+ +
var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext("webgl");
+
+//一些绘制要使用gl前后文
+
+offscreen.transferToImageBitmap();
+// ImageBitmap { width: 256, height: 256 }
+ +

Specifications

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

浏览器兼容

+ + + +

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

+ +

浏览相关

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