CanvasRenderingContext2D：getContextAttributes() 方法

语法

getContextAttributes()

参数

无。

返回值

一个 CanvasRenderingContext2DSettings 对象，其中包含实际的上下文参数。它具有以下成员

alpha 可选

一个布尔值，指示 canvas 是否包含 alpha 通道。如果为 false，则背景始终是不透明的，这可以加快透明内容和图像的绘制速度。

colorSpace 可选

指示渲染上下文的颜色空间。可能的值是

• srgb：表示 sRGB 颜色空间
• display-p3：表示 display-p3 颜色空间

colorType 可选

指示渲染上下文的颜色类型。可能的值是

• "unorm8"：表示颜色通道为 8 位无符号值。这是默认值。
• "float16"：表示颜色通道为 16 位浮点值。

desynchronized 可选

一个布尔值，指示用户代理是否通过将 canvas 绘制周期与事件循环进行异步处理来降低延迟。

willReadFrequently 可选

一个布尔值，指示此 canvas 是否使用软件加速（而不是硬件加速）来通过 getImageData() 支持频繁的读回操作。

示例

此示例展示了如何在创建 canvas 上下文时指定上下文属性，然后调用 getContextAttributes() 来读取浏览器使用的实际参数。

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += text;
}

首先，我们使用 HTMLCanvasElement.getContext() 创建一个上下文，仅指定一个上下文属性。

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d", { alpha: false });

如果 getContextAttributes() 方法受支持，我们使用它来读取浏览器使用的实际属性（包括我们明确指定的那些）。

if (ctx.getContextAttributes) {
  const attributes = ctx.getContextAttributes();
  log(JSON.stringify(attributes));
} else {
  log("CanvasRenderingContext2D.getContextAttributes() is not supported");
}

根据浏览器支持的属性，下面的日志应显示一个类似以下的字符串： {alpha: false, colorSpace: 'srgb', desynchronized: false, willReadFrequently: false}

规范

浏览器兼容性

另见

• HTMLCanvasElement.getContext()
• WebGLRenderingContext.getContextAttributes()