canvas结局(前端 入门 动画 canvas)

目录：
动画的基本实现方式是什么？为什么用canvascanvas实现序列帧动画的扩展和思考？1.动画的几个概念？
动画的本质
当连续播放几幅静态画面时，人眼的“视觉暂留”导致画面不断变化。
基本框架
子图像被称为帧。
FPS帧速率
每秒帧数，表示动画播放速度的单位。一般电影24FPS，电视25~30FPS，游戏60FPS以上。
题外话：为什么游戏帧率比电影高但看起来还是卡？
主要是因为实现方式、摄影方式的不同，单张图片(帧)包含的信息更多。
实际摄影中一帧一帧拍下的高速运动中的人。
二、动画实现的方式
1.元素属性(位置、大小、角度、透明度等)的连续变化。).具体的例子有html中的css，游戏中的骨架动画等。
骨骼动画
2.序列帧播放
具体例子是大部分电影、电视、动画片等。
第三，为什么要用画布？
1.css动画有很大的局限性和文档流的历史包袱。
2.gif质量差，无法监控具体的帧事件。比如我想在回放的最后进行一个操作，用时间来监控是不准确的。比如鸡蛋砸了，锤子没砸完，结果出来了。
四、学习H5动画的第一步
忘记过时的文档流布局。
5.实现序列帧动画的步骤
想法：
1.画第一张图。
2.画第二张图，替换第一帧。
3.依次循环，循环法
具体方法：
一般使用setTimeout、setInterval、requestAnimationFrame等几个API。
你自己查文件就行了。很简单的事情，这里就不赘述了。
毕竟其实绝大多数人都是用现成的JS动画库来写东西的。我用游戏引擎写，原生画布能理解概念。
(真的不能有人用原生画布的api写点东西吗！)
不及物动词画布坐标系
Canvas本身仍然在html文档流中，但它不是文档流。
注意画布的宽度和高度是由js设置的，而不是css。如果css的宽度和高度不等于js，就会失真。
其实是笛卡尔坐标系。
七。画布的常见功能
1.画图形和路径。
2.绘制文本
画一幅图像
4.移动、翻转、变形等。画布(保存当前状态，恢复状态)
5.对ImageData执行像素级操作
6.遮蔽和切割
7.用户交互行为
8.多块画布一起用，把复杂的问题拆分成简单的问题，可以分而治之。
八。扩展和思考
1.在前端项目上，canvas能发布多少用处。
2.如何定制合适的画布函数库？
3.自定义各种事件等等