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

浏览器兼容性

BCD tables only load in the browser

参见