MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

HTMLCanvasElement.getContext()

这篇翻译不完整。请帮忙从英语翻译这篇文章

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

语法

canvas.getContext(contextType, contextAttributes);

参数

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

注意: 标识符 "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 返回值是一个:

如果 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 画布的渲染上下文,可以使用它画你想画的了.

规范

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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (2d context) 4 3.6 (1.9.2) 9 9 3.1
webgl context 9[1]
33
3.6 (1.9.2)[1]
24 (24)
11.0[2] 9.0[3] 5.1[2]
webgl2 context 未实现 25 (25)[4] 未实现 未实现 未实现
2d alpha context attribute 32 30 (30) 未实现 (Yes) 未实现

failIfMajorPerformanceCaveat attribute

(Yes) 41 (41) (Yes) (Yes) ?
bitmaprenderer context 未实现 46 (46) 未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (2d context) (Yes) (Yes) 1.0 (1.9.2) (Yes) (Yes) (Yes)
webgl context ? ? (Yes)[2] ? ? ?
webgl2 context 未实现 未实现 未实现 未实现 未实现 未实现
2d alpha context attribute 未实现 未实现 30.0 (30) 未实现 未实现 未实现
failIfMajorPerformanceCaveat attribute ? ? 41.0 (41) ? ? ?
bitmaprenderer context 未实现 未实现 46.0 (46) 未实现 未实现 未实现

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

另请参阅

文档标签和贡献者

 此页面的贡献者: Jin_
 最后编辑者: Jin_,