背景
有很多游戏是用canvas去做的，百度上也有很多很炫酷的canvas实现的案例，那么怎么样用canvas实现在浏览器中播放ppt动画下效果呢？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，用canvas替代原来的div布局，有效增加文本的保密性和大型文本绘制效率。通俗易懂的讲，你要在某网站下载一张图片，有可能开发人员给你把右键事件给禁掉了，通常你按F12的话去里面扣图片，谁都防不住，就像嫖百度网站的图片一样。【此时你茅塞顿开，一堆收费的图片岂不是用这种方法剽窃......】
如果你用canvas的drawImage的话，你F12看到的也就是个canvas的元素【可以点击此永中文档示例试试】，至于canvas的具体使用这里就不细讲了，度娘讲比我细我多了。
本章主要讲的是用canvas实现动画，目前想要实现动画的时候基本上是使用CSS3 的animation属性，但是此类动画都是与html的标签元素绑定，但是目前所有数据都是绘制在一个canvas标签中，所以CSS3 的animation便走不通了。
实现原理
所有数据都是在一个canvas里面绘制而成，要想看到动画的播放过程，必须不断的绘制canvas，其中核心是调用requestAnimationFrame。
requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。设置这个API（设置回调函数，若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()）的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。
目前实现canvas的ppt动画即是1s绘制60次canvas，每一次绘制通过改变文本，图片的坐标，透明度，从而展示出ppt动画的效果，当然人的视觉是1s看到24帧的话就认为很流畅了，所以你也可以为了节省性能从而降低绘制频率。
下面是我从自己公司的实现制作了一张流程图，其中的ERO代表后端解析数据：
具体实现
目前市场上的见到的office软件有微软，金山，永中，基本上动画类型分为4大类：
1. 进入类型
【播放之前】：在此类动画播放之前是看不见的，遇到此次类型的动画先不绘制。
【播放中】：绘制过程中，canvas.globalAlpha不断增加，通过canvas.translate等方法变换坐标达到动画变化。
【播放之后】：正常绘制
【代码实现】：（以渐变式缩放为例）
2.强调类型
【播放之前】：在此类动画播放之前是看见的，遇到此次类型的动画先正常绘制。
【播放中】：绘制过程中，通过canvas.translate等方法变换坐标达到动画变化。
【播放之后】：每次绘制的时候调用最后一帧的绘画状态（譬如说放大类型的动画，播放完后会提留在放大的界面）。
【代码实现】：（以放大缩小为例）
3.退出类型
【播放之前】：在此类动画播放之前是看见的，遇到此次类型的动画先正常绘制。
【播放中】：绘制过程中，canvas.globalAlpha不断减少，通过canvas.translate等方法变换坐标达到动画变化。
【播放之后】：不再绘制
【代码实现】：（以渐变退出为例）
4.动作路径类型
【播放之前】：在此类动画播放之前是看见的，遇到此次类型的动画先正常绘制。
【播放中】：绘制过程中，通过canvas.translate等方法变换坐标达到动画变化。
【播放之后】：每次绘制的时候调用最后一帧的绘画状态（效果同强调类型的动画）。
【代码实现】：（以自定义路径为例）
谢谢您的观看，希望能对您有点帮助，嘿嘿！
出门在外，博主为了混口饭吃，插播条广告，大声一吼：DCS安全预览文档，转换快，功能多，让剽客无机可乘！
