学习JavaScript第十五章

1：使用 Canvas 绘图

用 <canvas> 元素可以指定一个绘图区域，并设置其height和width属性。

2. 2D上下文

2.1:2D 上下文的两种基本绘图操作是填充和描边。

填充，就是用指定的样式（颜色、渐变或图像）填 充图形；>描边，就是只在图形的边缘画线.

大多数 2D上下文操作都会细分为填充和描边两个操 作，而操作的结果取决于两个属性：fillStyle 和 strokeStyle

2.2 绘制矩形

矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括

fillRect()、 strokeRect() 和 clearRect()。
这三个方法都能接收 4个参数：
矩形的 x坐标、矩形的 y坐标、矩形 宽度和矩形高度。
这些参数的单位都是像素。

2.3 绘制路径

2D 绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复 杂的形状和线条。要绘制路 径，首先必须调用 beginPath()方法，表示要开始 绘制新路径。然后，再通过调用下列方法来实际地绘 制路径。

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘 制一条弧线，弧线半 径为radius，起始和结束角度（用弧度表示）分别为 **startAngle **和 endAngle。后一个参数表示 startAngle 和 endAngle 是否按逆时针方向计算，值为 false 表示按顺时针方向计算。
arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以 给定的半径 radius 穿过(x1,y1)。 >bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为 止，并且以 (c1x,c1y)和(c2x,c2y)为控制点。
lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。 >moveTo(x,y)：将绘图游标移动到(x,y)，不画线。
quadraticCurveTo(cx, cy, x,y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并 且以(cx,cy)作 为控制点。

2.4 绘制文本

文本与图形总是如影随形。为此，2D 绘图上下文也提供了绘制文本的方法。绘制文本主要有两个 方 法：fillText()和 strokeText()。这两个方法都可以接收 4 个参数：要绘制的文本字符串、x 坐 标、y坐标 和可选的大像素宽度。而且，这两个方法都以下列 3个属性为基础。

font：表示文本样式、大小及字体，用 CSS中指定字体的格式来指定，例如"10px Arial"。 >textAlign：表示文本对齐方式。可能的值有"start"、"end"、"left"、"right"和"center"。 建议使 用"start"和"end"，不要使用"left"和"right"，因为前两者的意思更稳妥，能同时 适合从左到右和 从右到左显示（阅读）的语言。 >textBaseline：表示文本的基线。可能的值有"top"、"hanging"、"middle"、"alphabetic"、 "ideographic"和"bottom"。

这几个属性都有默认值，因此没有必要每次使用它们都重新设置一遍值。fillText()方法使用 fillStyle 属 性绘制文本，而 strokeText()方法使用 strokeStyle 属性为文本描边。相对来说，还 是使用 fillText()的 时候更多，因为该方法模仿了在网页中正常显示文本 。

2.5 变换

通过上下文的变换，可以把处理后的图像绘制到画布上。2D绘制上下文支持各种基本的绘制变换。 创 建绘制上下文时，会以默认值初始化变换矩阵，在默认的变换矩阵下，所有处理都按描述直接绘制。 为 绘制上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果。 可以通过如下方法 来修改变换矩阵。

rotate(angle)：围绕原点旋转图像 angle 弧度。 scale(scaleX, scaleY)：缩放图像，在 x方向乘以 scaleX，在 y方向乘以 scaleY。scaleX 和 scaleY 的默认值都是 1.0。
translate(x, y)：将坐标原点移动到(x,y)。执行这个变换之后，坐标(0,0)会变成之前由(x,y) 表示的 点。 >transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改变换矩阵 setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：将变换矩阵重置为默认状态，然后 再调用 transform() .

2.6 绘制图像

2D绘图上下文内置了对图像的支持。如果你想把一幅图像绘制到画布上，可以使用 drawImage() 方 法。根据期望的终结果不同，调用这个方法时，可以使用三种不同的参数组合。简单的调用方式 是传入 一个 HTML 元素，以及绘制该图像的起点的 x和 y坐标。

2.7 阴影

2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。

shadowColor：用 CSS颜色格式表示的阴影颜色，默认为黑色。
shadowOffsetX：形状或路径 x轴方向的阴影偏移量，默认为 0。 shadowOffsetY：形状或路径 y轴方向的阴影偏移量，默认为 0。 shadowBlur：模糊的像素数，默认 0，即不模糊

2.8 渐变

渐变由 CanvasGradient 实例表示，很容易通过 2D上下文来创建和修改。要创建一个新的线性渐 变， 可以调用 createLinearGradient()方法。
这个方法接收 4个参数：
起点的 x坐标、起点的 y坐 标、终点 的 x 坐标、终点的 y 坐标。
调用这个方法后，它就会创建一个指定大小的渐变，并返回 CanvasGradient 对象的实例。 创建了渐变对象后，下一步就是使用 addColorStop()方法来指定色标。这个方法接收两个参数：** 色标 位置**和 CSS颜色值。色标位置是一个 0（开始的颜色）到 1（结束的颜色）之间的数字。

2.9 模式

模式其实就是重复的图像，可以用来填充或描边图形。要创建一个新模式，
可以调用 createPattern()方 法并传入两个参数：一个 HTML 元素和一个表示如何重复图像的字符串。 其中，第二个参数的值与 CSS的 background-repeat 属性值相同，包括"repeat"、"repeat-x"、 "repeat-y"和"no-repeat"

2.10 使用图像数据

2D上下文的一个明显的长处就是，可以通过 getImageData()取得原始图像数据。这个方法接收 4个参 数：要取得其数据的画面区域的 x和 y坐标以及该区域的像素宽度和高度。

2.11 合成

还有两个会应用到 2D 上下文中所有绘制操作的属性：globalAlpha 和 globalCompositionOperation。其中，globalAlpha 是一个介于 0和 1之间的值（包括 0和 1），用于指定所有绘制的透 明 度。默认值为 0。如果所有后续操作都要基于相同的透明度，就可以先把 globalAlpha 设置为适当 值， 然后绘制，后再把它设置回默认值 0。
第二个属性 globalCompositionOperation 表示后绘制的图形怎样与先绘制的图形结合。这个 属性的值 是字符串，可能的值如下

source-over（默认值）：后绘制的图形位于先绘制的图形上方。

source-in：后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明。

source-out：后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明。

source-atop：后绘制的图形与先绘制的图形重叠的部分可见，先绘制图形不受影响。

destination-over：后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见。

destination-in：后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明。

destination-out：后绘制的图形擦除与先绘制的图形重叠的部分。

destination-atop：后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会 变透明。

ighter：后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮。

copy：后绘制的图形完全替代与之重叠的先绘制图形。

xor：后绘制的图形与先绘制的图形重叠的部分执行“异或”操作。

3 WebGL

WebGL是针对 Canvas的 3D上下文。与其他 Web 技术不同，WebGL并不是 W3C制定的标准，而 是由 Khronos Group制定的。其官方网站是这样介绍的：“Khronos Group是一个非盈利的由会员资助的 协 会，专注于为并行计算以及各种平台和设备上的图形及动态媒体制定无版税的开放标准。 ” Khronos Group也设计了其他图形处理 API，比如 OpenGL ES 2.0。浏览器中使用的 WebGL就是基于 OpenGL ES 2.0制定的。 OpenGL等 3D图形语言是非常复杂的，本书不可能介绍其中每一个概念。熟悉 OpenGL ES 2.0的读 者可能会觉得 WebGL更好理解一些，因为好多概念是相通的。

3.1 类型化数组

WebGL涉及的复杂计算需要提前知道数值的精度，而标准的 JavaScript数值无法满足需要。为此， WebGL引入了一个概念，叫类型化数组（typed arrays）。类型化数组也是数组，只不过其元素被设置 为 特定类型的值。 类型化数组的核心就是一个名为 ArrayBuffer 的类型。每个 ArrayBuffer 对象表示 的只是内存 中指定的字节数，但不会指定这些字节用于保存什么类型的数据。通过 ArrayBuffer 所能做 的，就是 为了将来使用而分配一定数量的字节。

3.2 WebGL上下文

目前，在支持的浏览器中，WebGL 的名字叫"experimental-webgl"，这是因为 WebGL 规范仍 然未制 定完成。制定完成后，这个上下文的名字就会变成简单的"webgl"。如果浏览器不支持 WebGL， 那么 取得该上下文时会返回 null。在使用 WebGL上下文时，务必先检测一下返回值。 通过给 getContext()传递第二个参数，可以为 WebGL上下文设置一些选项。这个参数本身是一 个对 象，可以包含下列属性。

alpha：值为 true，表示为上下文创建一个 Alpha通道缓冲区；默认值为 true。

depth：值为 true，表示可以使用 16位深缓冲区；默认值为 true。

stencil：值为 true，表示可以使用 8位模板缓冲区；默认值为 false。

antialias：值为 true，表示将使用默认机制执行抗锯齿操作；默认值为 true。

premultipliedAlpha：值为 true，表示绘图缓冲区有预乘 Alpha值；默认值为 true。

preserveDrawingBuffer：值为 true，表示在绘图完成后保留绘图缓冲区；默认值为 false