getContext()方法

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

HTMLCanvasElement.getContext()返回一个canvas渲染的上下文，如果不支持返回null.

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上下文上，实验性特性。

1、contextType为"2d"时的context 属性：

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

2、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位的模板缓冲区。

3、WebGLRenderingContext接口 中的 getContext()

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

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

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

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

4、WebGL2RenderingContext接口 中的getContext()

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

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

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

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