GPUCanvasContext

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

WebGPU API 的 GPUCanvasContext 接口表示 <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

浏览器兼容性

BCD tables only load in the browser

参见