JS笔记：15、16、17章 Canvas、HTML5编程、错误处理
第15章 使用Canvas绘图
不用说，HTML5添加的最受欢迎的功能就是元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。
除了具备基本绘图能力的2D上下文，还建议了一个名为WebGL的3D上下文。
基本用法：
drawing” width=“200” height=“200”>a drawing of something.
如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。
要在这块画布上绘图，需要取得绘图上下文。
Var drawing = document.getElementById(“drawing”);
if(drawing.getContext){ var context = drawing.getContext(“2d”);}
使用toDataURL()方法，可以导出在元素上绘制的图像。
2D上下文：
使用2D绘图上下文提供的方法，可以绘制简单的2D图形，比如矩形、弧线和路径。
（1）填充和描边
2D上下文的两种基本绘图操作是填充和描边。
操作的结果取决于两个属性：fillStyle和strokeStyle，这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是“#000000“。
（2）绘制矩形
矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括fillRect()、strokeRect()和clearRect()。都接收4个参数：矩形的x坐标、y坐标、宽度、高度。
（3）绘制路径
2D绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复杂的形状和线条。要绘制路径首先必须调用beginPath()方法，表示要开始绘制新路径。然后用下列方法来实际绘制路径：
Arc()：绘制弧线；
arcTo()：从上一点开始绘制一条弧线；
bezierCurveTo()：从上一点开始绘制一条曲线；
lineTo(x,y)：从上一点开始绘制一条直线，到(x,y)为止；
moveTo(x,y)：将绘图游标移动到(x,y)，不画线；
quadraticCurveTo：从上一点开始绘制一条二次曲线；
Rect(x,y)：从点(x,y)开始绘制一个矩形；
（4）绘制文本
绘制文本主要有两个方法：fillText()和strokeText()。这两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标、文本的最大像素宽度（可选）。
（5）变换
通过上下文的变换，可以把处理后的图像绘制到画布上。可以通过如下方法来修改变换矩阵：
Rotate(angle)：围绕原点旋转图像angle弧度；
scale(scaleX，scaleY)：缩放图像；
translate(x,y)：将坐标原点移动到(x,y)；
transform：直接修改变换矩阵；
setTransform：将变换矩阵重置为默认状态后，再调用transform。
可以调用save()方法，把当前的上下文设置保存进一个栈结构中，使用restore()方法进行出栈。
（6）绘制图像
2D绘图上下文内置了对图像的支持，如果你想把一副图像绘制到画布上，可以使用drawImage()方法。
最简单的调用方式是传入一个HTML 元素，以及绘制该图像的起点的x和y坐标。
除了给drawImage()方法传入HTML元素外，还可以传入另一个元素作为其第一个参数。
（7）阴影
2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。
shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur；
（8）渐变
渐变由CanvasGradient实例表示，要创建一个新的线性渐变，可以调用createLinearGradient()方法。创建的gradient对象可以设置到fillStyle或strokeStyle上。
要创建径向渐变（或放射渐变），可以使用createRadialGradient()方法。
（9）模式
模式其实就是重复的图像，可以用来填充或描边图形。可以调用createPattern()方法并传入两个参数：一个HTML元素和一个表示如何重复的字符串（和background-repeat属性值相同）。
将模式对象设置到fillStyle上。
createPattern()方法的第一个参数也可以是一个
（10）使用图像数据
可以通过getImageData()取得原始图像数据。
（11）合成
globalAlpha属性：是一个介于0-1之间的值，用于指定所有绘制的透明度。
globalCompositionOperation：表示后绘制的图形怎样与先绘制的图形结合。
WebGL：
WebGL是针对Canvas的3D上下文。浏览器中使用的WebGL就是基于OpenGL ES 2.0制定的。
（1）类型化数组
类型化数组也是数组，只不过其元素被设置为特定类型的值。类型化数组的核心就是一个名为ArrayBuffer的类型，每个ArrayBuffer对象表示的只是内存中指定的字节数，但不会指定这些字节用于保存什么类型的数据。
Var buffer = new ArrayBuffer(20);
1.视图
使用ArrayBuffer（数组缓冲器类型）的一种特别的方式就是用它来创建数组缓冲器视图。最常见的视图是DataView，通过它可以选择ArrayBuffer中一小段字节。
虽然DataView能让我们在字节级别上读写数组缓冲器中的数据，但我们必须要记住要将数据保存到哪里，需要占用多少字节。这样就有很多工作量，因此类型化视图就应运而生。
2.类型化视图
类型化视图一般也被称为类型化数组，因为它们除了元素必须是某种特定的数据类型外，与常规的数组无异。
（2）WebGL上下文
drawing.getContext(“experimental-webgl”);取得了WebGL上下文之后，就可以开始3D绘图了。
1.常量
在WebGL中，保存在上下文对象中的这些常量都没有GL前缀。
2.方法命名
方法名的后缀会包含参数个数（1到4）和接收的数据类型（f表示浮点数，i表示整数）；也可以接收数组，包含字母v。
3.准备绘图
绘图前，调用clearColor()方法来指定要使用的颜色值。
4.视口与坐标
要改变视口的大小，可以调用viewport()方法。
5.缓冲区
顶点信息保存在JavaScript的类型化数组中，使用之前必须转换到WebGL的缓冲区。要创建缓冲区，可以调用gl.createBuffer()，然后使用gl.bindBuffer()绑定到WebGL上下文。这两步做完之后，就可以用数据来填充缓冲区了。
不想要某个缓冲区了，可以调动gl.deleteBuffer(buffer);
6.错误
手工调用gl.getError()方法，输出错误常量。
7.着色器
WebGL中有两种着色器：顶点着色器和片段（或像素）着色器。
8.编写着色器
9.编写着色器程序
为便于使用，通常是把着色器包含在页面的