红书第十五章 Canvas

HTML5新增了canvas，它跟浏览器提供的其它组件一样，是由几组API构成，并且各浏览器支持得有所差别。
除了2D上下文，canvas还建议了名为webGL的3D上下文。

1. 基本用法

      canvas元素使用前，要先设置width和height，指定绘图区域的大小。也可以用js修改、设置其对应的DOM对象的width和height属性。也可用CSS设置其样式。总之，要明确指定绘图区域。
      然后要取得canvas的绘图上下文，canvas元素.getContext('2d')
      调用toDataURL方法可以导出canvas元素上的图像，此方法需要传入参数指定格式（MIME类型格式）。

2. 2D上下文

2D上下文提供了一些方法绘制2D图形。2D上下文的坐标始于canvas元素左上角，x轴方向水平向右，y轴方向垂直向下。

2.1 填充和描边

2D上下文的两种基本操作是填充和描边。
2D上下文有两个属性，fillStyle和strokeStyle，默认值都是#000000，可以把它们修改成表示颜色的字符串，也可以设为渐变对象或模式对象。填充操作和描边操作将使用对应的style来绘制。

2.2 绘制矩形

      fillRect方法在指定矩形区域内填充。
      strokeRect给指定矩形区域描边。
      clearRect可以把上下文中的一块矩形区域变透明。这个方法可以用来“切”出各种有趣的形状。
      小tip：描边的线条宽度由lineWidth控制，线条末端的形状（butt平头/round圆头/square方头）由lineCap控制，线条相交的方式（round圆交/bevel斜交/miter斜接）由lineJoin控制。

2.3 绘制路径

      开始绘制路径前，先调用上下文的beginPath方法。然后一段一段地画，画的时候可能用到以下方法：arc、arcTo、bezierCurveTo、lineTo、moveTo、quadraticCurveTo、rect。
      画了若干段以后，可以调用closePath闭合曲线。
      路径画完了可以用fill方法填充图形，也可以用stroke方法对路径描边。
      还可以调用clip在路径上创建一个剪切区域。
      关于路径还有个方法，isPointInPath，判断一个点是否在路径上。

2.4 绘制文本

      绘制文本的方法：filText和strokeText，接受参数：字符串、x坐标、y坐标、最大像素宽度（可选）
      绘制文本时，还受上下文这些设置的影响：font、textAlign（设为start时x坐标表示文本起点；设为center时x坐标表示文本水平中点；设为end时x坐标表示文本终点）、textBaseline（设为top时，y坐标表示文本顶端；设为middle时，y坐标表示文本垂直中点；设为bottom时，y坐标表示文本底端，此外还有hanging、alphabetic、ideographic等值可选）
      此外，fillText受fillStyle设置的影响，strokeText受strokeStyle设置的影响。
      为了帮助开发者将文字绘制在特定区域，2D上下文提供一个方法measureText，传入要绘制的文本，它会返回一个TextMetrics对象，给出文本度量信息。

2.5 变换

      2D上下文可以设置各种变换。
      不设置2D上下文变换时，上下文保持一个默认的变换矩阵，如果设置了上下文变化，矩阵就会变化，绘制结果就会不同。
      设置上下文变换的方法有：
            rotate 围绕原点旋转一个角度
            scale 缩放，在x方向上乘scaleX，在y方向上成scaleY
            translate 把坐标原点移到指定坐标
            transform 直接修改矩阵，原矩阵会乘以由参数构成的新矩阵

对上下文做的设置会一直生效，如果知道自己需要倒回早先的设置，可以用save方法，调用save方法可以生成一张上下文的快照，并且快照会被保存在一个栈中。调用restore方法可以返回到上次save时的设置，多次调用restore可以返回到更早时的设置。

2.6 绘制图像

      可以把DOM文档里的img元素内容绘制到canvas中去。
      比如：context.drawImage(document.images[0],10,10)把文档中的图形绘制到指定坐标
      这个方法还可以多传参数，指定绘制出的图形的大小，进行缩放，还能指定截取源图像的一个区域，仅将区域内图像绘制到canvas中。
      除了用DOM文档里的img元素，还可以传入另一个canvas元素作为源图像。
      图源有个限制，不能来自其它域，使用其它域的图源执行drawImage会报错。

2.7 阴影

上下文可以设置这些属性：shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur，只要在绘制前调好需要的值，可以在画路径或形状时加上阴影。

2.8 渐变

通过2D上下文可以创建、修改CanvasGradient实例，创建好渐变对象以后，把fillStyle或strokeStyle设置为这个渐变对象，然后再填充图形或者描边，就能有渐变效果。

2.9 模式

模式可以在填充和描边时，填上重复的图像。创建模式的方法：createPattern，
createPattern第一个参数是HTML的img或video或canvas元素，表示重复的内容；第二个参数是个字符串表示重复的方式，取值为repeat/repeat-x/repeat-y/no-repeat

2.10 使用图像数据

      调用2D上下文getImageData可以获得canvas的图像数据，getImageData方法接受四个参数，指定要获取的区域的起始坐标，以及区域的宽高。
      返回的是一个ImageData对象，ImageData对象有3个属性：宽，高，像素数据数组。每一个像素用数组中的四个元素来表示，像素x的数据就保存在data[x*4]、data[x*4+1]、data[x*4+2]、data[x*4+3]中。4个元素分别表示红蓝绿值和透明度。
      所以可以用getImageData方法获取到图像原始数据并做修改，再用putImageData方法把数据写回去，就能搞灰度处理等各种图片处理了。

2.11 合成

上下文属性globalAlpha，用于设置所有绘制的透明度，默认值为0，如果把它改了，接下来所有的绘制都会以设置的透明度值来画。
2D上下文属性globalCompositionOperation，用于设置后绘制的图形与先绘制的图形怎么重合，默认是后绘制的盖在先绘制的上面。但可以设置成各种其它值，呈现许多奇特的效果。这里就不抄了。

3. WebGL

webGL是针对canvas的3D上下文，它是基于OpenGL ES 2.0标准设计的，所以接下来介绍WebGL的时候会牵扯到一些OpenGL的内容。

3.1 类型化数组

      由于JavaScript的数据类型不能满足3D计算的要求，所以WebGL引入了一个概念：类型化数组。就是一个叫ArrayBuffer的数据类型，创建时，指定字节长度，就会得到一块内存。
例：var buffer = new ArrayBuffer(20); var len = buffer.byteLength; // len等于20
视图
      DataView可以读取ArrayBuffer上面的某一段（创建它的时候给它传入ArrayBuffer实例，并指定偏移量和长度），然后可以调用DataView的一些get和set方法，就可以在DataView所管理的那一段上面以各种（有/无符号）（整/浮点数）（8/16/32/64位）格式读写数据。
      这些get和set方法也可以传入偏移量，但我想此时的偏移量应该是相对于DataView所管理的那一段而言的，跟DataView相对于ArrayBuffer的偏移量应该是两码事。
      作者说DataView就是让我们能在字节级别上读写数组缓冲器中的数据。不过它的缺点是，使用的时候要自己记住数据要保存在哪几位，需要占用多少字节，还是比较繁琐的。

类型化视图
      也叫类型化数组，继承自DataView，它的元素必须是特定类型。
      每种类型化数组都有一个BYTES_PER_ELEMENT属性，表示每个元素占多少字节，比如说Uint8Array.BYTES_PER_ELEMENT就是1。
      利用BYTES_PER_ELEMENT，可以比较方便地初始化。例：new Int8Array(buffer, 0, 10 * Int8Array.BYTES_PER_ELEMENT)
      里边还讲了它的一些特点和一些使用方法，我就不抄了
      类型化视图的目的在于简化对二进制数据的操作。
      类型化数组是WebGL项目中执行各种操作的重要基础

3.2 WebGL上下文

      WebGL是OpenGL ES 2.0在Web上的实现。
      由于有些浏览器不支持WebGL，所以使用前要检测一下是否能成功获取WebGL上下文。
      通过getContext()获取WebGL上下文时，可以传入第二个参数用于设置WebGL上下文的一些选项，这些选项有：
      alpha 是否为上下文创建一个Alpha通道缓冲区，默认true
      depth 是否使用16位深缓冲区，默认true
      stencil 是否使用8位模板缓冲区，默认true
      antialias 是否使用默认的抗锯齿功能，默认true
      premultipliedAlpha 绘图缓冲区是否预乘Alpha值，默认true
      preserveDrawingBuffer 是否在绘图完成后保留绘图缓冲区，默认false。
      这些选项的含义我一个也不懂
      传递这些参数的代码是这样的：

if (canvas.getContext) {
    gl = canvas.getContext('experimental-webgl', {alpha:false...});
    if (gl) {
      ...
    }
}

常量
WebGL支持OpenGL中的大部分常量。只是不像OpenGL里那样带有GL_前缀。比如，OpenGL里的GL_COLOR_BUFFER_BIT就是WebGL里的gl.COLOR_BUFFER_BIT。

方法命名
OpenGL（以及WebGL）中很多方法都在名字中体现其数据类型的信息，比如，gl.uniform4f()表示这个方法要接收4个浮点数，gl.uniform3i()表示要接收3个整数（f表示浮点数，i表示整数）。而gl.uniform3iv()表示方法接收3个整数数组（v表示vector）。

准备绘图
      在实际操作WebGL上下文之前，一般要使用一种实色清除canvas，所以首先要使用clearColor方法指定这个颜色。
      下面是清理缓冲区的代码：
      gl.clearColor(0, 0, 0, 1) // 参数分别代表RGBA
      gl.clear(gl.COLOR_BUFFER_BIT) // 把屏幕颜色清除成当前设置清除颜色

视口与坐标
      开始绘图前，先要定义webGL的视口。默认情况下WebGL的视口为整个canvas区域。
也可以调用gl.viewport()方法设定视口大小。viewport方法接收4个参数，前两个指定坐标，后两个指定宽高。
      指定视口的坐标时，以canvas元素的左下角为坐标原点（而不是平常网页坐标那样从左上角开始）
      另外，视口内部的坐标系与定义视口时的坐标系也不一样，在视口内部，坐标原点为视口的中心。

缓冲区
碎碎念：WebGL有个缓冲区的概念。它是什么意思？
作者说，顶点信息保存在类型化数组中，使用前必须转换到WebGL缓冲区。
我不知道这个数据被读取的链条是怎么样的，首先数据在类型化数组中？然后被搬到缓冲区？然后被绘制到页面上？

书上只说了缓冲区的用法：
      gl.createBuffer()创建缓冲区
      gl.bindBuffer(target, buffer)绑定缓冲区到WebGL上下文的某个指定对象。因为不能直接向缓冲区写入数据，而只能向“目标”写入数据，所以要想缓冲区写数据，必须先绑定。
      gl.bufferData(target, data, usage)往缓冲区写入内容
      gl.deleteBuffer(buffer)删除缓冲区，释放内存。如果不deleteBuffer，则在页面重新加载前，缓冲区始终保留在内存中。
      几个方法接收的参数我也看不懂作者说的什么意思
      网上查了一下，缓冲区主要是用于一口气画多个点。

错误
WebGL与JavaScript的一个最大区别在于，WebGL操作一般不会抛出错误。为了知道是否有错误发生，必须在一个可能出错的语句后面，加上一句gl.getError()，getError方法将返回一个常量，常量的值表示了错误情况。
有时候一个语句可能会出多个错，为了保证能把所有错误信息都读取来，最好用循环语句调用gl.getError()，直到得到的常量值为0（也就是gl.NO_ERROR）为止。

着色器
      着色器shader是OpenGL中的另一个概念。在WebGL中有两种着色器，顶点着色器和像素着色器。
      顶点着色器用于将3D的顶点转换为需要渲染的2D点。
      像素着色器用于计算要绘制的每个像素的颜色。
      WebGL着色器不是用JavaScript写的，而是用GLSL语言写的。

编写着色器
GLSL是一种类C语言，专门用于编写OpenGL着色器。因为WebGL是按OpenGL ES2.0实现的，所以OpenGL中的着色器可以在webGL中使用，因此方便了将桌面图形应用移植到浏览器中。

编写着色器程序
略（我看不懂，以后再去了解WebGL）

为着色器传入值
略

调试着色器和程序
略

绘图
      WebGL只能绘制3种形状：点、线和三角。其它所有形状都是由这三种基本形状合成后再绘制到三维空间中的。
      执行绘图操作要调用gl.drawArrays()或gl.drawElements()方法，前者用于绘制数组缓冲区，后者用于绘制元素数组缓冲区。
      gl.drawArrays()和gl.drawElements()的第一个参数都是一个常量，用于指定绘制的形状。（比方说，把数组中每个顶点当作一个点来绘制/把数组中的点当作若干个线段的顶点来绘制，因为是若干个线段，每个线段要两个点来表示，所以数组长度应当是偶数/把数组中的每个顶点当作一个多边形的各顶点，画成一个闭合形状……）

纹理
WebGL可以使用DOM中的image、video、其它canvas当作纹理。用作纹理的图像必须与包含页面来自同一个域，或者服务器允许资源跨域共享。

读取像素
与canvas 2D上下文类似，WebGL上下文也能读取像素值。

3.3 支持

要注意，浏览器实现了WebGL以后，还需要计算机显示驱动程序也要支持，才能使用WebGL。