前端动画与canvas一篇就放弃

目录：

1. 什么是动画
2. 动画实现的基本方式
3. 为什么使用canvas
4. canvas实现序列帧动画
5. 拓展与思考

一、动画的几个概念

动画的本质

若干张静态的画面连续播放时，由于人眼的“视觉暂留”，造成连续变化的图画。

帧Frame

一副画面就称为一帧。

帧率FPS

既Frames Per Second，表示动画播放速度的单位。一般电影是24FPS，电视25~30FPS，游戏60FPS或以上。

题外话：为什么游戏帧率比电影高却还是显得卡顿

主要是因为实现方式的不一样，摄影的方式，单张图片（帧）里面包含的信息更多。

二、动画实现的方式

1.元素属性（位置大小角度透明度等等）连续的变化具体例子html里面的css、游戏中的骨骼动画等

2.序列帧播放

具体的例子 大多数电影、电视、动画片等

三、为什么用canvas

1.css动画局限性比较大、文档流的历史包袱

2.gif质量很差，且无法监控到具体的帧事件，比如我想在播放结束的时候进行某个操作，用时间去监控并不准确。如砸蛋活动的时候就是锤子没砸完，结果就出来了。

四、学习H5动画的第一步

五、实现一个序列帧动画的步骤

思路：

1.绘制第一帧图片

2.绘制第二张图片，并替代第一帧

3.依次循环，循环的方法

具体方法：

一般使用setTimeout 、setInterval、 requestAnimationFrame这几个api。

这个自己查文档就好了，很简单的东西，这里就不赘述了。

毕竟实际上绝大多数人是用现成的JS动画库来写东西，我是用游戏引擎写，原生canvas了解概念就行。

（不会真有人用原生canvas的api来写东西吧！）

六、canvas坐标系

canvas本身还在html文档流内，但是它里面就不是文档流了。

注意canvas的宽高用js设置，而不是css。如果用css的宽高不等于js设置的会变形。

七、canvas常用功能

1.绘制图形、路径

2.绘制文本

3.绘制图像

4.画布的移动、翻转、变形等（保存当前状态，回复状态）

5.对ImageData进行像素级操作

6.遮罩、裁剪

7.用户交互行为

8.多canvas协同使用，复杂问题拆分成简单问题，分而治之。

八、拓展和思考

1. 前端的项目上，canvas能发布多大用途。

2.如何自定义适合的canvas功能库。

3.自定义各种事件等等