HTMLCanvasElement.getContext()

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

语法

canvas.getContext(contextType, contextAttributes);

参数

上下文类型（contextType）

是一个 DOMString 包含上下文标识符定义和绘制上下文关联到canvas上。可能的值是:

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

注意: 标识符 "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缓冲区。
• depth: boolean值表明绘制缓冲区包含一个深度至少为16位的缓冲区。
• stencil: boolean值表明绘制缓冲区包含一个深度至少为8位的模版缓冲区。
• antialias: boolean值表明是否抗锯齿。
• premultipliedAlpha: boolean值表明页面排版工人将在混合alpha通道前承担颜色缓冲区。
• preserveDrawingBuffer: 如果这个值为true缓冲区将不会清除它，会保存下来，直到被清除或被使用者覆盖。

• failIfMajorPerformanceCaveat: 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 画布的渲染上下文，可以使用它画你想画的了.

规范

浏览器兼容性

[1] Chrome 9 and Gecko 1.9.2 initially implemented this as experimental-webgl. Since Chrome 33 and Gecko 24 it is implemented as the standard webgl.

[2] Internet Explorer 11, WebKit 5.1 and Firefox Mobile implemented this as experimental-webgl.

[3] Opera 9 implemented this as experimental-webgl, behind a user preference, in version 15.0 the user preference got removed.

[4] Gecko 25 implements this as "experimental-webgl2" behind the user preference webgl.enable-prototype-webgl2. Starting with Gecko 42, the string "webgl2" is used behind the same preference.

另请参阅

• The interface defining it, HTMLCanvasElement.
• OffscreenCanvas.getContext()
• Available rendering contexts: CanvasRenderingContext2D, WebGLRenderingContext and WebGL2RenderingContext and ImageBitmapRenderingContext.