GPUCanvasContext

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

WebGPU APIGPUCanvasContext 接口表示 <canvas> 元素的 WebGPU 渲染上下文,通过 HTMLCanvasElement.getContext() 调用返回 "webgpu"contextType

实例属性

canvas 实验性 只读

返回创建上下文的 canvas 的引用。

实例方法

configure() 实验性

使用给定的 GPUDevice 配置渲染上下文并清除 canvas 为透明的黑色。

getCurrentTexture() 实验性

返回一个由 canvas 上下文合成到文档的 GPUTexture

unconfigure() 实验性

移除预设的上下文配置,并销毁在配置 canvas 上下文时生成的任何配置。

示例

js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});

规范

Specification
WebGPU
# gpucanvascontext

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
GPUCanvasContext
Experimental
canvas
Experimental
configure
Experimental
toneMapping config property
Experimental
getConfiguration
Experimental
getCurrentTexture
Experimental
unconfigure
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见