动画与Canvas图形-JavaScript高级编程第4版（21）
早期动画是通过调用setInterval设置每隔多长时间更新一次实现的，因为显示器的刷新率是60HZ，所以最佳重绘时间是1000毫秒/60，约17ms。但是因为setInterval并不能保证时间精度，只是加到任务队列，但是不保证立即执行，所以如果动画频率和屏幕刷新频率不一致，容易引起丢帧，导致动画卡顿。
requestAnimationFrame函数，它会通知浏览器，由浏览器决定什么时候进行绘制，因此解决了动画不平滑的问题。使用时传入动画更新函数作为参数，动画更新函数内部递归以自己为参数调用requestAnimationFrame。取消时使用cancelAnimationFrame。
requestAnimationFrame跟setInterval不一样，在页面不可见时，浏览器会控制暂停动画，因此节省了cpu。另外在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
Canvas画布提供了2d和3d（webgl）上下文，可以在上面实现绘图。通过c.getContext('2d')或c.getContext('webgl2')获取上下文对象。2d上下文对象有以下功能：
填充和描边
| fillStyle | 上下文中填充样式，可以是css支持的任何格式 |
| stokeStyle | 上下文中描边样式，可以是css支持的任何格式 |
绘制矩形：矩形是2D上下文中唯一一个可以直接绘制的图像
| fillRect(x, y, width, height) |
填充一个矩形 |
| stokeRect(x, y, width, height) |
描边一个矩形 |
| clearRect(x, y, width, height) |
画一个空白矩形 |
绘制路径
| beginPath() |
开始一个路径 |
| closePath() |
结束一个路径 |
| moveTo(x, y) |
不绘制，只把光标移动到x,y |
| LineTo(x, y) |
绘制一条上一个点到x,y的直线 |
| rect(x, y, width, height) |
绘制矩形路径，而不是图形 |
| arc(x, y, radius, startAngle, endAngle, counteclockwise) |
绘制弧形 |
| arcTo(x1, y1, x2, y2, radius) |
经由x1, y1绘制一条从上一点到x2,y2的弧形 |
| lineCap |
直线端点的样式：butt(平头)，round（圆头），square（出方头） |
| lineJoin |
线条交点样式：round(圆转），bevel（取平），miter（出尖） |
| lineWidth |
线宽 |
绘制文本
| stokeText(text, x, y) |
描边绘制文本 |
| fillText(text, x, y) |
填充绘制文本，一般都用fillText方法 |
| font |
字体样式，如"10px Arial" |
| textAlign |
左右对其方式：start, end, left, right, center |
| textBaseLine |
上下对齐方式：top, hanging,middle, alphabetic, ideographic, bottom |
| metureText(text).width |
文本占用宽度，用于调整font的大小 |
变换
| rotate(angle) |
围绕原点旋转角度 |
| scale(scaleX, scaleY) |
通过在x，y轴乘以scaleX,和scaleY来缩放图像，默认值scaleX和scaleY都是1 |
| translate(x, y) |
将原点移动到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 |
| save() |
将绘制上下文的设置和变换压栈存储 |
| restore() |
从栈中取到上次save的绘制上下文和变换，恢复 |
绘制图像
| drawImage(image/video/canvas, x, y) |
绘制图像 |
| toDataURL（） |
获取图像 |
阴影
| shadowBlur |
像素，表示阴影模糊量。默认0表示不模糊 |
| shadowColor | CSS颜色，默认黑色 |
| shadowOffsetX / shadowOffsetY |
相对于形状或路径的偏移量，默认为0 |
渐变
| createLinearGradient(x1, y1, x2, y2) |
创建两个点之间的渐变 |
| createRaialGradient(x1, y1, radius1, x2, y2, radius2) |
创建径向渐变（放射性渐变） |
| addColorStop(index, color) |
为渐变添加色标 |
图案
| createPattern(image/video/canvas, repeatMode) |
创建重复图像模式，返回值赋值给fillStyle。repeatMode可以为repeat, repeat-x, repeat-y, no-repeat |
图像数据
| getImageData(x, y, width, height) | 返回的data属性是一个数组，表示每个像素的rgba信息，可以进行例如设置黑白版等精确的控制 |
| putImageData(imageData, x, y) |
将修改后的像素信息，重绘到x,y |
合成
| golobalAlpha |
指定全局透明度，默认0 |
| globalCompositionOperation |
指定新绘制的图形与已有图形的位置关系。source-over默认值,新图形在上，soure-in只画与老图形的重叠部分，source-out只画与老图形不重叠的部分，source-atop只画重叠部分，老图形不受影响。另外还有把source变成destination的四个值。还有ligher,copy,xor等值。 |