【微信小程序开发（原生）】canvas 动画

  <!-- 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)
      })
  }
})

以上是官方的canvas demo

其中 如果需要drawImage, 加载工程目录下的图片，

JavaScript 的 canvas 是这么写的

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

小程序里如果这么写就会报错 没有定义Image

对它需要这样

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

这样就OK了

清除画布

ctx.clearRect

不停的画 不停地清除，就可以实现动画

但是微信小程序在这种时候，性能不行就崩溃了，所以简单的动画在微信小程序还是用CSS3完成比较好。