CanvasRenderingContext2D：getContextAttributes() 方法

无。

一个 CanvasRenderingContext2DSettings 对象，包含实际的上下文参数。它包括以下成员：

alpha 可选

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

colorSpace 可选

指定渲染上下文的色彩空间。可能的值有：

• srgb：表示 sRGB 色彩空间
• display-p3：表示 Display-P3 色彩空间

desynchronized 可选

一个布尔值，指示用户代理通过将画布绘制周期与事件循环解耦，从而减少了延迟。

willReadFrequently 可选

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

此示例展示了如何在创建画布上下文时指定上下文属性，并调用 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()");
}

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

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