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()