一般要做屏幕的分辨率和rpx到设计稿（一般设计稿按750px宽）像素之间的转换

// pages/canvas/index.js
Page({
  /**
   * 像素转换
   * @param {*} arg 
   */
  rpx2px(arg) {
    const info = wx.getSystemInfoSync()
    const width = info.screenWidth
    return arg * width / 750
  },
  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#cid')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        this.canvas = canvas
        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height
        // 创建canvas渲染上下文
        const ctx = canvas.getContext('2d')
        const dpr = wx.getWindowInfo().pixelRatio
        console.log('---dpr', dpr)
        // 手动改变canvas的宽和高
        canvas.width = width * dpr
        canvas.height = height * dpr
        console.log(canvas.width, canvas.height)
        ctx.scale(dpr, dpr)
        ctx.fillStyle = 'orange'
        // 矩形填充
        ctx.fillRect(this.rpx2px(0), this.rpx2px(0), this.rpx2px(750), this.rpx2px(500))
        ctx.fillStyle = '#000000'
        ctx.font = `bold ${this.rpx2px(80)}px 宋体`
        ctx.textAlign = "center"
        // 文本水平居中
        ctx.fillText('你好世界', this.rpx2px(750 / 2), this.rpx2px(100))
      })
  }
})