HTML5和Webkit实现树叶飘落动画

nbsp;html&gt;    <title>HTML5树叶飘落动画</title>    <meta>    <meta>    <link>    <script></script>    <p>        </p><p></p>        <p>            <em>这是基于webkit的落叶动画</em>        </p>      css代码：body{    background-color: #4E4226;}#container {    position: relative;    height: 700px;    width: 500px;    margin: 10px auto;    overflow: hidden;    border: 4px solid #5C090A;    background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;}#leafContainer {    position: absolute;    width: 100%;    height: 100%;}#message{    position: absolute;    top: 160px;    width: 100%;    height: 300px;    background:transparent url('images/textBackground.png') repeat-x center;    color: #5C090A;    font-size: 220%;    font-family: 'Georgia';    text-align: center;    padding: 20px 10px;    -webkit-box-sizing: border-box;    -webkit-background-size: 100% 100%;    z-index: 1;}em {    font-weight: bold;    font-style: normal;}#leafContainer &gt; p {    position: absolute;    width: 100px;    height: 100px;    -webkit-animation-iteration-count: infinite;    -webkit-animation-direction: normal;    -webkit-animation-timing-function: linear;}#leafContainer &gt; p &gt; img {     position: absolute;     width: 100px;     height: 100px;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: alternate;     -webkit-animation-timing-function: ease-in-out;     -webkit-transform-origin: 50% -100%;}@-webkit-keyframes fade{    0%   { opacity: 1; }    95%  { opacity: 1; }    100% { opacity: 0; }}@-webkit-keyframes drop{    0%   { -webkit-transform: translate(0px, -50px); }    100% { -webkit-transform: translate(0px, 650px); }}@-webkit-keyframes clockwiseSpin{    0%   { -webkit-transform: rotate(-50deg); }    100% { -webkit-transform: rotate(50deg); }}@-webkit-keyframes counterclockwiseSpinAndFlip {    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }}js代码：const NUMBER_OF_LEAVES = 30;function init(){    var container = document.getElementById('leafContainer');    for (var i = 0; i <p>PS：下面看下html5 canvas处理连续帧图片,下面的代码基于IE8以上</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class="brush:php;toolbar:false">nbsp;html&gt;<meta><meta><title>Canvas Demo</title><script>var canvas = null;//初始化参数var img = null;var ctx = null;var imageReady = false;window.onload = function() {    var canvas = document.getElementById("animation_canvas");    canvas.width = canvas.parentNode.clientWidth;    canvas.height = canvas.parentNode.clientHeight;    if (!canvas.getContext) {        console.log("Canvas not supported. Please install a HTML5 compatible browser.");        return;    }       // get 2D context of canvas and draw rectangel    ctx = canvas.getContext("2d");    ctx.fillStyle="black";    ctx.fillRect(0, 0, canvas.width, canvas.height);    console.log(canvas.height);    img = document.createElement(&#39;img&#39;);    img.src = "images/ab0.png";    img.onload = loaded();}  //保证只有图像加载后才开始循环动画function loaded() {    imageReady = true;    setTimeout( update, 1000/3);//添加3帧每秒间隔计时器}function redraw() {    ctx.fillStyle="black";    ctx.fillRect(0, 0, 460, 460);    ctx.drawImage(img, 0, 0, 232, 180);}   //为了让图片以规定的速度动画，我们必须追踪已经经过的时间，然后根据分配给每帧的时间播放帧。基本步骤是：//1、按每秒几帧设置动画速度(msPerFrame)。//2、当你循环游戏时，计算一下自最后一帧以后已经经过了多少时间（delta）。//3、如果已经经过的时间足够把动画帧播完，那么播放这一帧并设置累积delta为0。//4、如果已经经过的时间不够，那么记住（累积）delta时间（acDelta）。var frame = 0;var lastUpdateTime = 0;var acDelta = 0;var msPerFrame = 200;function update() {    requestAnimFrame(update);    var delta = Date.now() - lastUpdateTime;    //console.log(Date.now(),lastUpdateTime);    if (acDelta > msPerFrame){        acDelta = 0;        redraw();        img.src=&#39;images/ab&#39;+frame+&#39;.png&#39;;        frame++;         if(frame >= 3) frame = 0; //当绘制后且帧推进完，计时器就会重置。    }else{        acDelta += delta;    }    lastUpdateTime = Date.now();}//requestAnimFrame的作用基本上就是setTimeout，但浏览器知道你正在渲染帧，所以它可以优化绘制循环，以及如何与剩下的页面回流。//在某些情况下，setTimeout比requestAnimFrame更好用，特别是对于手机。//以下是在不同的浏览器上调用requestAnimFrame的情况也不同，标准的检测方法如下：window.requestAnimFrame = (function(){    return window.requestAnimationFrame ||            window.webkitRequestAnimationFrame ||            window.mozRequestAnimationFrame ||            window.oRequestAnimationFrame ||            window.msRequestAnimationFrame ||            function( callback ){                window.setTimeout(callback, 1000 / 3); //如果requestAnimFrame支持不可用，还是可以用回内置的setTimeout。            };})();</script>    <canvas></canvas>