HTMLCanvasElement.getContext()

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

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

语法

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

参数

上下文类型(contextType)
是一个指示使用何种上下文的 DOMString 。可能的值是:

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

上下文属性 (contextAttributes)

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

canvas.getContext("webgl",
                 { antialias: false,
                   depth: false });
2d 上下文属性:
  • alpha: boolean值表明canvas包含一个alpha通道。如果设置为false, 浏览器将认为canvas背景总是不透明的,这样可以加速绘制透明的内容和图片。
  • Non-Standard (Gecko only) willReadFrequently: boolean值表明是否有重复读取计划。经常使用getImageData(),这将迫使软件使用 2D canvas 并 节省内存(而不是硬件加速)。这个方案适用于存在属性 gfx.canvas.willReadFrequently的环境。并设置为true (缺省情况下,只有 B2G / Firefox OS).
  • Non-Standard (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> 元素:

<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
HTML Standard
# dom-canvas-getcontext-dev

浏览器兼容性

BCD tables only load in the browser

另请参阅