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() is not supported");
}

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

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