uniapp开发微信小程序简易的播放png序列帧

一、创建个canvas

<view class="zhiyin">
            <canvas style="width: 100%;height: 100%;" id="myCanvas" type="2d"></canvas>
 </view>

二、执行逻辑

drawImg() {
                let that = this
                // var context = uni.createCanvasContext('myCanvas')
                uni.createSelectorQuery().in(this).select("#myCanvas").fields({
                        node: true,
                        size: true
                    })
                    .exec(res => {
                        let canvas = res[0].node
                        let frames = []
                        for (let i = 0; i <= 204; i++) {
                            (function(i) {
                                let image = canvas.createImage()
                                if (i < 10) {
                                    image.src = "你的路径"
                                    frames[i - 1] = image
                                }
                            })(i)
                        }
                        if (frames.length == 204) {
                            setTimeout(()=>{
                                that.drawFrame(res[0].node, frames)
                            },500)
                        }
                    })
            },
            drawFrame(data, frams) {
                let canvas = data
                let frameIndex = 0
                let timer = null
                let ctx = canvas.getContext('2d')
                canvas.width = 1080
                canvas.height = 948
                // let image = canvas.createImage()
           
                timer = setInterval(() => {
                    ctx.clearRect(0, 0, 1080, 948);
                    // ctx.drawImage(image, 0, 0, 150, 150);
                    ctx.drawImage(frams[frameIndex], 0, 0, 1080, 948);
                    frameIndex++;
                    if (frameIndex >= frams.length) {
                        frameIndex = 0;
                        clearInterval(timer)
                    }
                }, 35)
                
                this.audioInstance.play() //这是我执行的背景音乐
            
            },

三、在onReady执行调用drawImg就ok了