canvas 序列帧动画

 先引入 jquery.js 
       frame-animation.js


//先创建 canvas 
createCanvas:function () {
        var canvasWidth =document.getElementsByTagName('body')[0].offsetWidth;

        var preHeight = 750/800;

        var canvasHeight = canvasWidth/preHeight;

        var canvas = document.createElement("canvas");
   
        canvas.id = "canvasImg";

        var box = document.getElementById("canvas_box"); //在html 中先定义div容器

        box.appendChild(canvas);

        //设置宽高一定要在canvas节点添加之后 
        document.getElementById("canvasImg").width = canvasWidth;
        
        document.getElementById("canvasImg").height = canvasHeight;

},

//序列帧执行函数

play_animation:function () {

    var framesUrl = [] ;
    for(var i = 1; i<24;i++){ //遍历图片
        framesUrl.push('./src/images/'+ i + '.png')
    }

    var ani = new frame_ani({
        canvasTargetId: "canvasImg", // target canvas ID
        framesUrl: framesUrl, // frames url
        loop: true, // if loop
        // width:  750 , // source image's width (px)
        width:  750 , // source image's width (px)
        height: 800, // source image's height (px)
        frequency: 5, // count of frames in one second
        onComplete: function () { // complete callback
            console.log("完成")
        },
    });
    ani.initialize(() => {
        ani.play();
    });
}

调用函数 即可生效