微信小程式canvas 常用api

onReady: function() {
    const ctx = wx.createCanvasContext('canvasId');
    const query = wx.createSelectorQuery().select('#canvas').boundingClientRect(res => {
       ctx.beginPath()
       ctx.save()
       ctx.moveTo(0, 0)
       ctx.lineTo(0, res.height)
       ctx.lineTo(res.width, res.height)
       ctx.lineTo(res.width, 0)
       ctx.setLineWidth(10)
       ctx.setStrokeStyle('#f00')
       ctx.closePath()
       ctx.stroke()
      ctx.beginPath()
      ctx.restore()
      ctx.setFontSize(20)
      let str = '1234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891'
      this.lineFeed(res, ctx, str)
      ctx.draw(true)
    }).exec()
   }
  // 字型換行
  lineFeed(res, ctx, str) {
    let len = str.length //字型長度
    const metrics = ctx.measureText(str[0]).width //字型寬度
   // 一行字型的寬度
    let ow = Math.floor((res.width-10) / metrics)
    //多少列
    let lei = Math.ceil(len / ow)
    for (let i = 0; i < lei; i++) {
      let str1 = ''
      str1 = str.slice(i * ow, (i + 1) * ow)
      ctx.strokeText(str1, 5, 100 + i * 20)
    }
    ctx.draw()
  },
           

文本文字,可以自動換行哦!

環切效果

ctx.beginPath()
    ctx.arc(100, 100, 10, 0, 2 * Math.PI)
    ctx.setFillStyle('#f00')
    ctx.fill()
    ctx.clip()//相當于css overflow效果
    ctx.arc(100, 100, 100, 0, 2 * Math.PI)
    ctx.setFillStyle('#ff0')
    ctx.fill()
    ctx.draw()
           

微信小程式新接口demo

querycanvas(){
    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 //分辨率 
          const dpr = 750 / getSystemInfoSync.windowWidth
        canvas.width = res[0].width * dpr //控制圖檔 不變形
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        ctx.fillRect(0, 0, 100, 100)
      })

  },
           

參考:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/RenderingContext.html

三、使用clearRect函數

var w = theCanvas.width;

var h = theCanvas.height;

context.clearRect(0, 0, w, h);
           

二、重置畫布高度

var w = theCanvas.width;

 var h = theCanvas.height;

 theCanvas.width = w;

 theCanvas.height = h;
           

使用一個新的背景色簡單地填充整個畫布，這樣就可以清除目前内容

context.fillStyle = '#ffffff';

context.fillRect(0, 0, theCanvas.width, theCanvas.height);