绘制序列帧动画

HTML5 Canvas动画效果演示

  首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。

<div id="cantainer">
    <canvas id="cavsElem">

    </canvas>
</div>
<button id="btn-dir-left">←</button>
<button id="btn-dir-right">→</button>
<button id="btn-dir-up">↑</button>
<button id="btn-dir-down">↓</button>

准备四个按钮，分别是：左、右、上、下。

<script>
    (function(){
        var canvas = document.querySelector(