[wechat applet development (native)] canvas animation

  <!-- canvas.wxml -->
  <canvas type="2d" id="myCanvas"></canvas>

// canvas.js
Page({
    
  onReady() {
    
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
     node: true, size: true })
      .exec((res) => {
    
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)

        ctx.fillRect(0, 0, 100, 100)
      })
  }
})

The above is official canvas demo

among if necessary drawImage, Load pictures under the project directory ,

JavaScript Of canvas It's written like this

var image = new Image();
image.src="/images/head.jpeg";
image.onload=function(){
    
	ctx.drawImage(this,0,0,60,60,0,0,120,120);
}

If this is written in the applet, an error will be reported No definition Image

It needs this

var img = canvas.createImage();
image.src="/images/head.jpeg";
image.onload=function(){
    
	ctx.drawImage(this,0,0,60,60,0,0,120,120);
}

So you OK 了

Clear the canvas

ctx.clearRect

Keep painting Keep clearing , You can achieve animation

But wechat applets at this time , If the performance is not good, it will crash , So simple animation is still used in wechat applet CSS3 Good completion .