动画与Canvas图形-JavaScript高级编程第4版（21）

Posted 2021-04-23 前端学习每一天

早期动画是通过调用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等值。