【微信小程序】canvas

地址

• 微信官方地址
  https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
• canvas api
  https://www.canvasapi.cn/CanvasRenderingContext2D/fillText

注：wx.createCanvasContex 等已被废弃

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