直接贴代码了：

export const timer = () =>{    var lastTime = 0;    var vendors = ['ms', 'moz', 'webkit', 'o'];    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];    };    if (!window.requestAnimationFrame) {        window.requestAnimationFrame = function (callback) {            var currTime = new Date().getTime();            var timeToCall = Math.max(0, 16 - (currTime - lastTime));            var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);            lastTime = currTime + timeToCall;            return id;        };    };    if (!window.cancelAnimationFrame) {        window.cancelAnimationFrame = function (id) {            clearTimeout(id);        };    };}export const canvasStart = (imgSrc) => {    if (!imgSrc) return;    var flash, coinImage, canvas;    // 为了下面可以清除循环定义    var loopname;    // 循环    function loop() {        loopname = window.requestAnimationFrame(loop);        flash.update();        flash.render();    }    // 取消循环    // function cancelloop() {
        //     window.cancelAnimationFrame(loopname);    // };    // 初始化canvas    function init() {        flash.render();    }    //     function sprite(options) {        var that = {},            // 首帧位置            frameIndex = 0,            // 播放第几帧            tickCount = 0,            // 每秒播放帧数            ticksPerFrame = options.ticksPerFrame || 0,            // 总帧数字            numberOfFrames = options.numberOfFrames || 1;        that.context = options.context;        that.width = options.width;        that.height = options.height;        that.image = options.image;        that.update = function () {            tickCount += 1;            if (tickCount > ticksPerFrame) {                tickCount = 0;                // If the current frame index is in range                if (frameIndex < numberOfFrames - 1) {                    // Go to the next frame                    frameIndex += 1;                } else {                    frameIndex = 0;                }            }        };        that.clear = function () {            // Clear the canvas            that.context.clearRect(0, 0, that.width, that.height);        };        that.render = function () {            // Clear the canvas            that.context.clearRect(0, 0, that.width, that.height);            // Draw the animation            that.context.drawImage(                that.image,                frameIndex * that.width / numberOfFrames,                0,                that.width / numberOfFrames,                that.height,                0,                0,                that.width / numberOfFrames,                that.height            );        };        return that;    }    // Get canvas    canvas = document.getElementsByTagName("canvas")[0];    if(!canvas) return;    canvas.width = 134;    canvas.height = 150;    // Create sprite sheet    coinImage = new Image();    // set sprite    flash = sprite({        context: canvas.getContext("2d"),        width: 5494,        height: 150,        image: coinImage,        numberOfFrames: 41,        ticksPerFrame: 4    });    // Load sprite sheet    coinImage.addEventListener("load", init);    coinImage.src = "http://skybjf.github.io/img/article/insert/20151016/yvdi.png";    coinImage.src = imgSrc;    loop();}复制代码

效果示例

http://skybjf.github.io/demo/20151016/canvas.html复制代码