canvas写帧动画

var aofeikeyFrames;
function keyFrames(id, img, width, height, count){
    var keyFrames = new CanvasKeyFrames(document.querySelector(id), 'sprite', img, {
        /width:204.92,//注意，隐藏元素是拿不到宽度的，所以特殊情况下需要指定宽度
        //height:204.92,
        //cover: 10, //指定封面帧，默认是0
        fps: 23, //默认是24
        // loop: 10 //初始化默认的循环数，在formTo中可以设置，默认是infinite,
        ratio: 2, //雪碧图模式才需要，图片的高清比例，与@2x相似，默认是2，低清模式是1,
        _iw: width, // 雪碧图中单个图片的宽度
        _ih: height, // 雪碧图中单个图片的高度
        framesCount: count // 雪碧图帧数
    });
    //alert(1)
    return keyFrames;
    //keyFrames.play();
}
             
function initcanvaskeyf(){
    var aofei = new Image();
    aofei.src = 'https://oos.funthin.com/photosynthesis/img/long/long8.png';
    //aofei.onload = function(){
    //      aofei.onload = null;
        //}
    aofeikeyFrames= keyFrames(".longi", aofei, 370, 370, 126);
        //div对象  对应图片   单屏序列帧动画宽度  单屏序列帧动画高度 指定序列帧对象
    aofeikeyFrames.play();
        //aofeikeyFrames.pause();//停止动画帧
}
//页面加载完调用           
initcanvaskeyf();
$(".longi canvas").attr("width",$(".longi").width()*3).attr("height",$(".longi").height()*3);

原链接：https://segmentfault.com/a/1190000013260037