运行 putImageData() 比 drawImage() 慢。 同等条件下html 5 canvas游戏开发实战_高清完整版，首选drawImage()。
操作图像数据需要遍历大量的数据。 需要注意以下几点：
1）避免在循环体中直接访问对象属性并将其存储在局部变量中。
2）应该使用循环计数器来遍历完整的像素而不是像素分量（4个为一组）
3）反向遍历和移位技术效果不佳
4）不要频繁使用getImagedata()
视频处理
var video=document.getElementById('video');//一个元素
...
context.drawImage(video,0,0);//获取其中一帧
视频格式
并非所有浏览器都支持上述三种格式。 您需要指定多种格式的文件并将源元素嵌入视频元素中。
在 Canvas 中播放视频
将显示元素设置为无并将视频的每一帧绘制到画布上。
第5章 动画
动画循环：不断更新和重画称为“动画循环”，是所有动画的核心逻辑。
无限循环：
函数动画（）{...}
while(true){动画();}
为了实现动画效果，必须每隔一段时间就给浏览器喘息的机会。
不要使用 window.setInterval() 或 window.setTimeout() 方法进行动画。 这两种方法都没有提供精确的计时机制。 浏览器有一个术语“clamping the timeoutinterval（强制执行时间间隔的下限）”，并且你不应该主动指示浏览器何时绘制下一帧（浏览器有自己的动画机制）。 浏览器应该通知您。 概括：
它们都是通用方法，并不是专门用于动画的。
无法达到毫秒级精度
没有动画优化
没有考虑画动画的最佳时机
HTML5 有一个 requestAnimationFrame() 方法。 当你想要播放动画时，调用 requestAnimationFrame() 方法并向其传递动画播放函数的引用。 当浏览器决定绘制动画的第一帧时，它会调用此函数。 根据情况，再次调用，使动画继续
函数（时间）{
请求动画帧（动画）；
请求动画帧（动画）；
调用requestAnimationFrame()方法时，不需要指定固定的帧速率。 浏览器会自动选择合适的帧速率。
W3C还提供了cancelRequestAnimationFrame()方法，用于取消回调函数。 requestAnimationFrame()方法返回一个long对象，该对象用作标识回调函数身份的句柄（相当于setInterval函数返回的句柄）。 要取消，传递给cancelRequestAnimationFrame()即可
requestAnimationFrame()方法回调动画函数时3D动画，会向其传递一个时间值，表示从1970年1月1日到现在经过的毫秒数。
每个浏览器平台的可移植动画循环逻辑：如果发现当前浏览器支持W3C标准方法，则使用它，否则使用浏览器专有的实现。 如果都不支持，则只能使用setTimeout()方法。 完成
帧率计算，动画每秒播放的帧数（fps）技能特效，计算当前每帧动画的时间，获取时间差html 5 canvas游戏开发实战_高清完整版，将时间差除以1000毫秒
以不同的帧速率执行各种任务（分数等更新速率不必与动画速率相同）
要恢复动画背景，有以下三种处理背景的方法：
1）一切都被擦除并重新绘制
2）仅重画内容发生变化的区域
3）将背景图像内容发生变化的部分从离屏缓冲区复制到屏幕上
如果背景很简单，则重新绘制动画每一帧的所有内容将为您带来最佳性能。
使用剪切区域处理动画背景
所有的绘图操作都被限制在某个路径定义的范围内。 使用剪切区域技术来恢复前一帧动画所占用的背景有时可以提高绘制速度。
1）调用context.save()保存屏幕画布的状态
2）通过调用beginPath()开始一个新路径
3）在上下文对象上调用arc()和rect()来设置路径
4）调用context.clip()方法将当前路径设置为屏幕画布的剪切区域
5) 擦除屏幕画布中的图像
6）将背景图像绘制到屏幕画布上
7）恢复屏幕画布的状态参数
利用动画背景的平铺复制技术
将所有背景绘制到离屏画布上，然后将背景图块复制到屏幕上
一般来说，按图块复制比剪切区域要快，但离屏画布占用内存较多。
使用双缓冲技术绘制动画（浏览器自动使用该技术，但手动实现会降低性能）
清除画布，然后绘制下一帧动画。 如果动画是单缓冲的，则意味着其内容将立即绘制到屏幕上，暂时擦除背景导致闪烁。
为了防止闪烁，可以使用双缓冲，即将所有内容绘制到离屏画布上，然后将离屏画布中的图像一次性复制到屏幕画布上。
基于时间的运动
底层帧率不应该影响动画帧率，动画帧率应该保持稳定
背景滚动
视差动画：让每个动画层以不同的速度滚动，产生视差效果
用户手势
定时动画：很多动画需要在一定时间内运行
动画制作最佳指南
使用 requestNextAnimationFrame() 等“polyfill”方法来维护浏览器兼容性
将业务逻辑更新与动画绘制分开
使用基于时间的运动来协调动画的速度
使用剪切区域或平铺复制技术将复杂的背景图像恢复到屏幕上
如有必要，您可以使用一个或多个离屏缓冲区来提高背景的绘制速度。
不用手动实现传统的双缓冲算法，浏览器会自动实现
不要通过 CSS 指定阴影和圆角
不要在 Canvas 中使用阴影效果进行绘制
播放动画时不分配内存
使用性能调试和时间轴工具来监控和提高动画渲染效率
文章来源:https://blog.csdn.net/weixin_30782293/article/details/95126050
