收藏
回答

canvas制作动画使用clearRect会闪屏,怎么处理?

模拟器上还行,安卓和ios都很明显

const app = getApp()


Page({
    data: {
        ctx:{},
        top:0
    },
    onLoad() {
        wx.createSelectorQuery()
            .select('#myCanvas'// 在 WXML 中填入的 id
            .fields({ nodetruesizetrue })
            .exec((res) => {
                // Canvas 对象
                const canvas = res[0].node
                // 渲染上下文
                const ctx = canvas.getContext('2d')
                this.data.ctx = ctx
               
                // ctx.translate(20,50)
                // ctx.rotate(20 * Math.PI / 180);
               let i=0
              let timeout= setInterval(() => {
                ctx.clearRect(0,0,res[0].width,res[0].height)
                // 图片对象
                const image = canvas.createImage()
                // 图片加载完成回调
                image.onload = () => {
                    // 将图片绘制到 canvas 上
                    ctx.drawImage(image, 0, i)
                }
                i++
                // 设置图片src
                image.src = 'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png'
                if(i==50){
                    clearInterval(timeout)
                }
               }, 1000/60);
                })
    },
    close(){
        this.data.ctx.clearRect(00750200)
        // this.data.ctx.draw()
    },
})


回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容