小程序 Canvas 2D 爬坑

微信小程序声称 2.9.0 起支持新的 Canvas 2D 接口，且官方推荐，使用性能更好的2d模式。

官网文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
新的 canvas 2d，接口与 Web 一致，然而，官方的文档上对新 api 的说明寥寥无几，只能翻看 Web端api。

wxml

<canvas type="2d" id="canvas" style=" 100%;height: 400rpx"/>

wxml 中就是简单加个 id、type，以及样式。但是官方的 bug 提示中
Bug & Tip

tip: Canvas 2D（新接口）需要显式设置画布宽高 (默认为 300x150)

这里有个细节，后续会用。先按照正常流程往后走，取 ctx 对象

drawCanvas(){
    const query = wx.createSelectorQuery()
    query.select('#canvas')
      .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)
      })
}

标签里定义了宽高，在这里又重新定义，难以理解，试着删除 width、height 的设置。
然而后面的操作出现了变形，即使绘入一个正方形，在画布上展示的比例也不对。打印出 canvasNode，如下

通过 style 设置的宽高 _ 375,_height: 195；实际宽高 300,height: 150，显然来自默认宽高。
回想一下前面的官方bug 提示

tip: Canvas 2D（新接口）需要显式设置画布宽高 (默认为 300x150)

大胆设想一下，style设置宽高，相当于设置组件的外部容器，js设置宽高，则是定义实际操作的画布的宽高。。。
此外，dpr 设置像素比，缩放坐标系，把当前的坐标系横纵轴放大、缩小到 drp 倍。官方demo中，采用的是设备像素比，旨在达到最佳像素尺寸的图。
项目中，实际使用时，更多是750设计稿，不妨将其缩放比设为屏幕宽度/750标准宽度，此后的所有尺寸，都可以按照750设计稿上的尺寸来写入。改写一下

async drawCanvas(){
    // 取 canvas 节点
    // 此处使用 await
    let canvasNode = await new Promise((resolve, reject)=>{
      // 注意：若canvas是定义在在组件内，需改用
      // const query = wx.createSelectorQuery().in(this)
      const query = wx.createSelectorQuery()
      query.select('#canvas')
        .fields({ node: true, size: true })
        .exec(res=>{
          resolve(res[0])
        })
    })
    let canvas = canvasNode.node,
    ctx = canvas.getContext('2d')
    this.canvas = canvas
    this.ctx = ctx
    // 获取设备像素比调整画布尺寸，并缩放坐标系
    const dpr = wx.getSystemInfoSync().screenWidth / 750
    canvas.width = canvasNode.width * dpr
    canvas.height = canvasNode.height * dpr

    // 设置 canvas 坐标原点
    ctx.translate(width/2, height * 2 / 3);
    ctx.scale(dpr, dpr)
}

此处，ctx.translate()用来调整 canvas 坐标系，默认是左上角，ctx.translate(width/2, height * 2 / 3)可设置坐标系原点为横向中心，纵向2/3高度处。可根据实际应用做调增。
到这里，初步完成 canvas 的前期初始化，后面即可绘制

async render () {
    let canvas = this.canvas
    let ctx = this.ctx
    // 实例化 canvas 图像
    let image = await new Promise((resolve)=>{
      const img = canvas.createImage()
      img.src = '../images/img-arrow.png'
      img.onload = () => {
        resolve(img)
      }
    })

    let angle = -45    // 实际角度
    let abs = 1        // 正反转

    // 循环执行
    const renderLoop = () => {
      if(angle>45){
        abs = -1
      }else if(angle<-45){
        abs = 1
      }

      // 清楚画布
      ctx.clearRect(-375, -400, 750, 750)
      // 保存当前帧，以备复原
      ctx.save()
      // 画布旋转
      ctx.rotate(degree / 180 * Math.PI);
      // 绘制图像
      ctx.drawImage(image, -110, -228, 221, 302)
      // 操作完后复原至 save 步骤
      ctx.restore()
        
      angle += abs
    }
    // 动画帧循环执行
    canvas.requestAnimationFrame(()=>{
      renderLoop()
    }) 
}