js-JavaScript高级程序设计学习笔记13

第十五章 canvas绘图

1、WebGL是针对Canvas的3D上下文。

2、类型化数组

WebGL涉及的复杂计算需要提前知道数值的精度，而标准的JS数值无法满足需求。因此WebGL引入了一个概念，叫类型化数组。它的核心是一个名为ArrayBuffer(数组缓冲器)的类型，每个ArrayBuffer对象表示的只是内存中指定的字节数。能够通过该对象得到的信息只有它包含的字节数。

var buffer=new ArrayBuffer(20);
var bytes=buffer.byteLength;

1、视图。

2、类型化视图。一般也称为类型化数组。

3、WebGL上下文。

创建webgl上下文时，先进行能力检测，有的浏览器无法创建时会报错，所以最好把调用封装在一个try-catch块中。

1、常量。OpenGL中常量以GL_开头，webgl中没有GL_前缀。

2、方法命名。很多方法通过名字传达有关数据类型的信息。

3、准备绘图。在实际操作前，一般要用某种实色清除canvas，为绘图做好准备。

gl.clearColor(0,0,0,1);//black
gl.clear(gl.COLOR_BUFFER_BIT);//clear方法使用上步定义的颜色来填充相应区域。

4、视口与坐标。viewport方法改变视口大小。视口坐标原点位于左下角。视口内部的坐标系与定义视口的坐标系不一样，原点位于中心点。

5、缓冲区。顶点信息保存在JS的类型化数组中，使用之前必须转换到WebGL的缓冲区。调用gl.createBuffer()创建缓冲区，然后使用gl.bindBuffer()绑定到WebGL上下文，之后就可以用数据填充缓冲区了。

6、错误。手动调用gl.getError()方法获得错误类型的常量。

7、着色器。顶点着色器和片段（像素）着色器。它们是用GLSL语言写的。

12、绘图。WebGL只能绘制三种形状：点/线/三角。其他形状都是这三种基本形状合成而来。