HTMLCanvasElement.getContext()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

HTMLCanvasElement.getContext() 方法返回canvas 的上下文,如果上下文没有定义则返回 null .

在同一个 canvas 上以相同的 contextType 多次调用此方法只会返回同一个上下文。

语法

js
getContext(contextType)
getContext(contextType, contextAttributes)

参数

contextType

是一个指示使用何种上下文的 DOMString 。可能的值是:

备注: 标识符 "experimental-webgl" 或 "experimental-webgl2" 用于新 WebGL的实现。这些实现还没有达到测试套件一致性或图形驱动程序平台局势尚不稳定。Khronos Group 集团认证WebGL 实现在某些一致性规则

contextAttributes 可选

你可以在创建渲染上下文的时候设置多个属性,例如:

js
canvas.getContext("webgl", { antialias: false, depth: false });

2d 上下文属性:

  • alpha: boolean值表明canvas包含一个alpha通道。如果设置为false, 浏览器将认为canvas背景总是不透明的,这样可以加速绘制透明的内容和图片。
  • 非标准 (Gecko only) willReadFrequently: boolean值表明是否有重复读取计划。经常使用getImageData(),这将迫使软件使用 2D canvas 并 节省内存(而不是硬件加速)。这个方案适用于存在属性 gfx.canvas.willReadFrequently的环境。并设置为true (缺省情况下,只有 B2G / Firefox OS).
  • 非标准 (Blink only) storage: string 这样表示使用哪种方式存储 (默认为:持久("persistent")).

WebGL 上下文属性:

  • alpha: boolean值表明canvas包含一个alpha缓冲区。

  • antialias: boolean值表明是否开启抗锯齿。

  • depth: boolean值表明绘制缓冲区包含一个深度至少为 16 位的缓冲区。

  • failIfMajorPerformanceCaveat: 表明在一个系统性能低的环境是否创建该上下文的boolean值。

  • powerPreference: 指示浏览器在运行 WebGL 上下文时使用相应的 GPU 电源配置。可能值如下:

    • "default":自动选择,默认值。
    • "high-performance": 高性能模式。
    • "low-power": 节能模式。
  • premultipliedAlpha: 表明排版引擎将假设绘制缓冲区包含预混合 alpha 通道的boolean值。

  • preserveDrawingBuffer: 如果这个值为true缓冲区将不会被清除,会保存下来,直到被清除或被使用者覆盖。

  • stencil: 表明绘制缓冲区包含一个深度至少为 8 位的模版缓冲区boolean值。

返回值

RenderingContext 返回值是下列之一:

如果 contextType 不是上述之一,返回null.

示例

定义 <canvas> 元素:

html
<canvas id="canvas" width="300" height="300"></canvas>

通过如下代码可以获取 canvas2d 上下文:

js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
console.log(ctx); // CanvasRenderingContext2D { ... }

现在你已经获取到了 2D 画布的渲染上下文 (CanvasRenderingContext2D),可以使用它画你想画的了。

规范

Specification
HTML
# dom-canvas-getcontext-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getContext
2d context
options.alpha parameter
options.colorSpace parameter
options.desynchronized parameter
options.willReadFrequently parameter
bitmaprenderer context
options.alpha parameter
WebGL2 context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
WebGL context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
webgpu context
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

参见