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背景总是不透明的, 这样可以加速绘制透明的内容和图片.
  • (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> 元素:

<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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getContextChrome Full support YesEdge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
bitmaprenderer contextChrome Full support 56Edge ? Firefox Full support 46IE No support NoOpera Full support 43Safari No support NoWebView Android No support NoChrome Android Full support 56Firefox Android Full support 46Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 6.0
failIfMajorPerformanceCaveat attributeChrome Full support YesEdge ? Firefox Full support 41IE Full support YesOpera Full support YesSafari ? WebView Android No support NoChrome Android No support NoFirefox Android Full support 41Opera Android ? Safari iOS ? Samsung Internet Android No support No
powerPreference attributeChrome No support NoEdge No support NoFirefox Full support 63IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 63Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
WebGL contextChrome Full support 33
Full support 33
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Edge Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Firefox Full support 24
Full support 24
Full support 3.6
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
IE Full support 11
Alternate Name
Full support 11
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Opera Full support 15
Full support 15
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Safari Full support 5.1
Alternate Name
Full support 5.1
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
WebView Android Full support 37
Full support 37
Full support 37
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Chrome Android Full support 33
Full support 33
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Firefox Android Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Opera Android Full support 14
Full support 14
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Safari iOS ? Samsung Internet Android ?
WebGL2 contextChrome Full support 56Edge No support No
Notes
No support No
Notes
Notes WebGL 2 is under consideration in Edge, with a roadmap priority of medium. See the Edge Platform status for latest information.
Firefox Full support 51
Full support 51
Full support 25
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl2
IE No support NoOpera No support NoSafari No support NoWebView Android Full support 56Chrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
2d alpha context attributeChrome Full support 32Edge ? Firefox Full support 30IE No support NoOpera Full support YesSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 30Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

另请参阅