HTMLCanvasElement.getContext()

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 可选

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

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

• 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)，可以使用它画你想画的了。

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