HTMLCanvasElement.getContext()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTMLCanvasElement.getContext()
方法返回canvas
的上下文,如果上下文没有定义则返回 null
.
在同一个 canvas 上以相同的 contextType
多次调用此方法只会返回同一个上下文。
语法
getContext(contextType)
getContext(contextType, contextAttributes)
参数
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
可选-
你可以在创建渲染上下文的时候设置多个属性,例如:
jscanvas.getContext("webgl", { antialias: false, depth: false });
2d 上下文属性:
alpha
:boolean
值表明canvas
包含一个alpha
通道。如果设置为false
, 浏览器将认为canvas
背景总是不透明的,这样可以加速绘制透明的内容和图片。-
非标准
(Gecko only)
willReadFrequently
:boolean
值表明是否有重复读取计划。经常使用getImageData()
,这将迫使软件使用 2Dcanvas
并 节省内存(而不是硬件加速)。这个方案适用于存在属性gfx.canvas.willReadFrequently
的环境。并设置为true
(缺省情况下,只有 B2G / Firefox OS). -
非标准
(Blink only)
storage
:string
这样表示使用哪种方式存储 (默认为:持久("persistent")).
WebGL 上下文属性:
-
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>
通过如下代码可以获取 canvas
2d
上下文:
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