canvas中的getContext()方法 以及 webgl中的getContext()方法

一、getContext()方法

翻译自：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

语法：canvas.getContext(contextType, contextAttributes);

var ctx = canvas.getContext（contextType）;
var ctx = canvas.getContext（contextType，contextAttributes）;

contextType参数有以下四种：

“2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
“webgl”(或“experimental-webgl”),创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性。
“webgl2”,创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用。
“bitmaprenderer”，创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。

contextAttributes参数可传递多个参数集合用来创建渲染上下文：

例如：canvas.getContext('webgl', { antialias: false, depth: false });

contextType为’2d’时的context 属性：

alpha（boolean)：表示canvas是否包含一个alpha通道，设为false则浏览器知道背景永远不透明，能加速对于透明场景和图像的绘制。
willReadFrequently（Boolean）：表示是否计划有大量的回读操作，频繁调用getImageData()方法时能节省内存，仅Gecko内核浏览器支持。
storage（String）：声明使用的storage类型，默认为”persistent”。
contextType为‘WebGL ’时的context 属性：

alpha：Boolean类型，指示画布是否包含alpha缓冲区。
antialias：Boolean类型，指示是否执行抗锯齿。
depth：Boolean类型，表示绘图缓冲区的深度缓冲区至少为16位。
failIfMajorPerformanceCaveat：Boolean类型，指示如果系统性能较低，是否创建上下文。
powerPreference：对用户代理的提示，指示GPU的哪种配置适合WebGL上下文。可能的值是：
           “default”：让用户代理决定哪种GPU配置最合适。这是默认值。
            “高性能”：优先考虑渲染性能而不是功耗。
            “低功耗”：优先考虑节能而不是渲染性能。
premultipliedAlpha：Boolean类型，表示页面合成器将假定绘图缓冲区包含具有预乘alpha的颜色。
preserveDrawingBuffer：如果值为true，则不会清除缓冲区并保留其值，直到作者清除或覆盖。
stencil：Boolean类型，表示绘图缓冲区具有至少8位的模板缓冲区。

 

二、WebGLRenderingContext接口 中的 getContext()

翻译自：https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext

WebGLRenderingContext接口为HTML <canvas>元素的绘图表面提供了OpenGL ES 2.0图形渲染上下文的接口。

为了获得用于2D和/或3D图形渲染的WebGL上下文的访问，调用getContext()一对<canvas>元素，提供“WebGL的”作为参数：

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

获得画布的WebGL渲染上下文后，可以在其中进行渲染。

 

三、WebGL2RenderingContext接口 中的getContext()

翻译自：https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext

WebGL2RenderingContext接口提供了一个HTML的纸面的OpenGL ES 3.0呈现上下文<canvas>的元素。

要获得此接口的对象，调用getContext()一对<canvas>元素，提供“webgl2”作为参数：

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl2');

WebGL 2是WebGL 1的扩展。该WebGL2RenderingContext接口实现了WebGLRenderingContext接口的所有成员。当在WebGL 2上下文中使用时，WebGL 1上下文的某些方法可以接受其他值。