HTMLCanvasElement.getContext() - Web API 接口参考 编辑

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

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

语法

var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);

参数

上下文类型（contextType）

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

• "2d", 建立一个 CanvasRenderingContext2D 二维渲染上下文。
• "webgl" (或"experimental-webgl") 这将创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本1(OpenGL ES 2.0)的浏览器上可用。
• "webgl2" (或 "experimental-webgl2") 这将创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本2 (OpenGL ES 3.0)的浏览器上可用。
• "bitmaprenderer" 这将创建一个只提供将canvas内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext  。

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

上下文属性(contextAttributes)

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

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 返回值是下列之一：

• CanvasRenderingContext2D 为 "2d",
• WebGLRenderingContext 为"webgl" 和"experimental-webgl",
• WebGL2RenderingContext 为"webgl2" 和"experimental-webgl2", 或者
• ImageBitmapRenderingContext 为"bitmaprenderer".

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

例子

定义 <canvas> 元素:

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

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

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

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

规范

Specification	Status	Comment
HTML Living Standard HTMLCanvasElement.getContext	Living Standard	No change since the latest snapshot, HTML5
HTML 5.1 HTMLCanvasElement.getContext	Recommendation
HTML5 HTMLCanvasElement.getContext	Recommendation	Snapshot of the HTML Living Standard containing the initial definition.

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

另请参阅

• HTMLCanvasElement.
• OffscreenCanvas.getContext()
• 可用的上下文: CanvasRenderingContext2D, WebGLRenderingContext 和 WebGL2RenderingContext and ImageBitmapRenderingContext.