转自：http://bbs.9ria.com/thread-244675-1-1.html

http://dev.tutsplus.com/tutorials/html5-canvas-optimization-a-practical-example--active-11893

?

如果你经常研究Javascript代码，并且有一定的经验，那你肯定让你的浏览器崩溃过。这些问题经常是一些Javascript的小bug比如说是一个无限的while语句循环；如果不是这个问题，那么你该考虑是不是页面转换或者是页面动画出了问题：就是那一类包含了在网页或者动态CSS风格界面中添加/删除元素的代码。这个教程的目标是教会你们充分运用Javascript和Html5中的<canvas>元素。当你看到了下面的基于Html5制作的生动的动画，那么这个教程也就开始了：

?

我们将会带着它走完整个教程，浏览不同的canvas使用技巧和技术，并且将它们运用到Javascript动画中的源代码中去。目标就是使用更精简更高效的Javascript代码来提升动画的执行速度，让动画更加平滑的结束，拥有更动态的动画结构。

?

教程中每一个步骤包含了Html和Javascript的源代码下载链接，你可以从任何一个步骤中开始你的学习。

?

让我开始第一个步骤。

?

第一步：播放电影预告

?

这段装饰是基于“sintel”制作的电影预告，sintel是一个用3D图像软件Blender制作的3D电影。它是用Html5最常用的两个功能构建的：<canvas>和<video>元素。

?

<video>元素载入和播放Sintel视频文件时，<canvas>代码通过进行快照功能对播放的视频进行快速截图，并且将这些图片与文字和其他的图画混合起来，生成了它自己对应的动态播放序列。当你点击播放视频时，<canvas>弹出栩栩如生的黑色背景，这个黑色背景是黑白版本的视频组成。缓缓的，视频的彩色截图出现在画面中，以一个电影的滚动视觉滑入。

?

<ignore_js_op style="word-wrap: break-word;">

?

?

在左上角，我们设置了标题和一些说明的文本，采用动态的渐变风格进入和退出。这个代码的运行速度和关联的指标以图片和闪亮的字体展示，都包含在一起放在在最下方的黑色方框中。稍后我们会更仔细的观察这个特别的东西。

?

最后，在动画的开头有个大型循环的长条飞过场景，这个长条的图画是从外部的PNG图片文件中读取的。

?

第二步：查看源代码

?

源代码包括Html，CSS和Javascript代码的混合。Html代码很少：仅有<canvas>和<video>标签，嵌套在<div>容器中。

?

<div>容器的ID名取为（animationWidget），为它所有的内容和目录应用对应的CSS规则（如下）。