先引入 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();
    });
}

調用函數 即可生效

canvas 序列幀動畫