Canvas画布_WebGL上下文

不了解互联网和前端的继续，前端大牛可以跳过

知识要点

canvas元素标签
获取对象方法getElementById
canvas对象方法getContext

7    <body>
8    <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
9    <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
10   
11   
12   <script>
13       //通过getElementById()方法获取canvas画布
14       var canvas=document.getElementById('webgl');
15       //通过方法getContext()获取WebGL上下文
16       var gl=canvas.getContext('webgl');
63       }
64   </script>
65   </body>

简单看一下代码结构，canvas标签、script标签写在body开始、结束标签之间，js控制的与canvas相关的对象方法写在script开始、结束标签之间。

获取对象方法getElementById

id="webgl"表示canvas元素的id是webgl，html元素为了相互区分需要的时候会使用id属性标识，canvas元素的id作为方法getElementById的参数，可以返回一个canvas对象。html的元素通过style样式属性可以更改颜色，添加边框。如果希望赋予html元素更大的灵活性，就需要可以使用编程语言控制，浏览器支持getElementById方法，正是为了满足这种需求，getElementById可以通过元素对象的id选择改元素，大家可以百度文档对象模型DOM，了解更多的概念，做过软件开发应该能够理解，交互界面的各种交互需要通过语言控制实现，一些常用的交互操作会封装起来。前端的界面设计相比客户端软件的要方便的多，通过HTML 就可以统一开发标准。利用原生的WebGL也可以设计应用界面，不过使用HTML和CSS能搞定，就不要再使用canvas的2D功能，或更底层的WebGL，简单来说网页界面设计的命令都是对WebGL的封装。最简单的界面使用HTML和CSS完成开发，需要进一步自定义，使用canvas引入平面绘图的一系列的API，自定义GUI，如果希望完全自定义操作界面可以使用原生WebGL封装，比如一个三场景中有一个室内开关，你希望通过鼠标可以单击网页上三维场景里面的灯开关控制灯。其实也就是场景中几何体如何选中的问题，后面的教程会讲解。

canvas对象方法getContext

可以把其他的元素理解为有默认内容的canvas画布，canvas画布是一个只有背景颜色的空画布，可以在空画布上面绘图，当getContext()方法的参数是“2d时”，可以使用2d绘图API，当参数是webgl时，可以使用WebGL API，比如“WebGL绘制一个点”这节教程源码第37行drawArrays方法就是WebGL API，可以使用脚本语言Javascript控制

WebGL兼容性

WebGL1.0标准大多数浏览器都支持， WebGL2.0标准正在推广中, 为了保持代码的兼容性要注意getContext的参数写法，具体参见《WebGL文档》

getContext不同参数不同意义(WebGL标准支持先后时间顺序来列举)

experimental-webgl：顾名思义，实验性支持，还没有正式支持
webgl：默认支持WebGL1.0标准，符合现在多数浏览器
experimental-webgl2：实验性支持WebGL2.0版本