HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7

性能

运行putImageData()比drawImage()慢，同等条件下优先考虑drawImage()

操作图像数据需要遍历大量数据，应该注意几点：

1）避免在循环体中直接访问对象属性，应当保存在局部变量中

2）应该用循环计数器遍历完整的像素，而非像素分量（每4个一组）

3）逆向遍历与移位技巧效果并不好

4）不要频繁使用getImagedata()

视频处理

var video=document.getElementById('video');　　//A <video>element

　　...

context.drawImage(video,0,0);　　//取其中某一帧

视频格式

以上三种格式并不是所有浏览器都支持，需要指定多钟格式的文件，在video元素中嵌入source元素

<video>

　　<source src='video.ogg'>

　　<source src='video.mp4'>

</video>

在Canvas中播放视频

把一段<video>元素display设置为none，将视频的每一帧绘制到canvas上

第5章 动画

动画循环：持续更新并重绘就叫做“动画循环”，它是所有动画的核心逻辑

死循环：

function animate(){...}

while(true){animate();}

要实现动画效果，必须让浏览器没隔一段时间就有一个喘息的机会

不要使用window.setInterval()或window.setTimeout()方法来做动画，这两个方法并不能提供精确计时机制，浏览器有个术语“clamping the timeout interval（强制规定时间间隔的下限）”，并且不应该主动命令浏览器何时去绘制下一帧（浏览器有自己的动画机制），应该由浏览器来通知你，总结：

都是通用方法，并不是专为制作动画而用

达不到毫秒的精确度

没有对动画的优化

不考虑绘制动画的最佳时机

HTML5有一个requestAnimationFrame()方法，想要播放动画时就调用requestAnimationFrame()方法，并将指向动画播放函数的引用传递给它，浏览器决定绘制第一帧动画时，就调用这个函数，根据情况可再次调用，使动画持续下去

function(time){

　　　　requestAnimationFrame(animate);

　　}

requestAnimationFrame(animate);

调用requestAnimationFrame()方法时，不必指定定帧速率，浏览器会自动选择合适的帧速率

W3C也提供了cancelRequestAnimationFrame()方法，用于取消回调函数，requestAnimationFrame()方法返回一个long型的对象，用作标识回调函数身份的句柄（相当于setInterval函数返回的句柄），若要取消，传递给cancelRequestAnimationFrame()即可

requestAnimationFrame()方法在回调动画函数时，会传递给它一个时间值，表示1970年1月1日到当前所经过的毫秒数

可移植与各浏览器平台的动画循环逻辑：如果发现当前浏览器支持W3C标准方法，就使用它，否则使用浏览器专有实现方式，如果两者都不支持，只能借助setTimeout()方法来实现

帧速率的计算，动画每秒播放的帧数（fps）计算每一帧动画当前的时间，获取时间差，1000毫秒除时间差

以不同的帧速率来执行各种任务（分数等更新速率不必与动画速率相同）

恢复动画背景，处理背景有三种办法

1）所有内容都擦除，并重新绘制

2）仅重绘内容发生变化的那部分区域

3）从离屏缓冲区中将内容发生变化的那部分背景图像复制到屏幕上

如果背景很简单，把每帧动画的所有内容都重绘一遍反而可以获得最佳性能

利用剪辑区域处理动画背景

所有的绘制操作都限定在某条路径所定义的范围内，利用剪辑区域技术来恢复上一帧动画占据的背景，有时可以提高绘制速度

1）调用context.save()，保存屏幕的canvas的状态

2）通过调用beginPath()来开始一段新的路径

3）在context对象上调用arc()、rect()来设置路径

4）调用context.clip()方法，将当前路径设置为屏幕canvas的剪辑区域

5）擦除屏幕canvas中的图像

6）将背景图像绘制到屏幕canvas中

7）恢复屏幕canvas的状态参数

利用图块复制技术来处理动画背景

将所有的背景绘制到离屏canvas上，再将背景图块复制到屏幕上

一般来说通过图块复制比剪辑区域速度更快，但离屏canvas更占用内存

利用双缓冲技术绘制动画（浏览器自动使用该技术，手工实现反而降低性能）

清除canvas然后绘制下一帧动画，如果动画是单缓冲，意味着其内容会被立即绘制到屏幕，擦除背景的一瞬间所造成闪烁

防止闪烁可以使用双缓冲，即将所有东西绘制到离屏canvas上，再将离屏canvas中的图片一次性复制到屏幕canvas中

基于时间的运动

底层的帧速率不应该影响动画的帧速率，动画帧速率应该保持稳定

背景的滚动

视差动画：让各个动画图层以不同的速度滚动，产生视差效果

用户手势

定时动画：很多动画需要在某个时间段内运行

动画制作得而最佳指导原则

使用类似requestNextAnimationFrame()这样的“polyfill式”方法来保持浏览器兼容性

将业务逻辑的更新与动画的绘制分开

使用“基于时间的运动”来协调动画的播放速度

用剪辑区域或图块复制技术将复杂的背景图像恢复到屏幕上

必要时可以使用一个或者多个离屏缓冲区提升背景的绘制速度

不要手工实现传统的双缓冲算法，浏览器会自动实现它

不要通过CSS指定阴影及圆角效果

不要在Canvas中进行带有阴影效果的绘制操作

不要在播放动画时分配内存

使用性能调试及时间轴工具来监控并改善动画的绘制效率