获取WebGL上下文
获取上下文
WebGL上下文是从<canvas>
标签中获取到的,通过canvas
对象的getContext()
函数可以获取WebGLRenderingContext
。
跟据参数的不同,getContext()
函数可以获取不同种类的渲染上下文。
接口
canvas.getContext(contextType: String, contextAttributes ?: Object)
-
contextType
:'2d'
:建立一个CanvasRenderingContext2D
二维渲染上下文'webgl'
或'experimental-webgl'
:创建一个WebGLRenderingContext
三维上下文对象,只在实现WebGL1的浏览器上可用'webgl2'
或'experimental-webgl2'
:创建一个WebGL2RenderingContext
三维渲染上下文对象,只在实现WebGL2的浏览器上可用'bitmaprenderer'
:创建一个只提供将canvas
内容替换为指定ImageBitmap
功能的ImageBitmapRenderingContext
-
contextAttributes
:-
当
contextType
为2d
时:alpha
:boolean,表明canvas包含一个alpha通道。如果设置为false
,浏览器默认canvas背景总是不透明的,可加速绘制透明物体willReadFrequently (Gecko only)
:boolean,表示是否有重复读取计划。经常使用getImageData()会导致软件使用2D canvas并节省内存,适用于存在属性gfx.canvas.willReadFrequently的环境storage (Blink only)
:string,表示使用哪种方式存储,默认为"presistent"持久性存储
-
当使用webgl上下文时:
alpha
:boolean,表明canvas包含一个alpha缓冲区antialias
:boolean,表明是否开启抗锯齿depth
:boolean,表明绘制缓冲区包含一个深度至少为16位的缓冲区failIfMajorPerformanceCaveat
:表明在一个系统性能低的环境是否创建该上下文的boolean值powerPreference
:指示浏览器在运行webgl上下文时使用相应的GPU电源配置,可能的值有"default"
:默认,自动选择"high-performance"
:高性能模式"low-power"
:节能模式
premultipliedAlpha
:boolean,表明排版引擎将假设绘制缓冲区包含预混合alpha通道preserveDrawingBuffer
:boolean,如果为true,缓冲区将不会被清除,会保存袭来,直到被清除或被覆盖stencil
:boolean,表明绘制缓冲区包含一个深度至少为8为的模板缓冲区
-
当要获取一个上下文对象的contextAttributes
时,可以使用接口context.getContextAttributes()
来获取
返回值
CanvasRenderingContext2D
:当ContextType
为"2d"
WebGLRenderingContext
:当ContextType
为"webgl"
或"experimental-webgl"
WebGL2RenderingContext
:当ContextType
为"webgl2"
或"experimental-webgl2"
ImageBitmapRenderingContext
:当ContextType
为"bitmaprenderer"
获取上下文事件
canvas
获取上下文会触发以下事件:
contextlost (experimental)
:当获取的CanvasRenderingContext2D
上下文丢失时会触发contextrestored (experimental)
:在用户代理恢复CanvasRenderingContext2D
时会触发webglcontextcreatingerror
:在用户无法创建WebGLRenderingContext
上下文时触发webglcontextlost
:在用户代理检测到绘制缓冲关联的WebGLRenderingContext
上下文丢失时会触发
-webglcontextrestored
:在用户代理恢复WebGLRenderingContext
对象的绘制缓冲时会触发