daliangzao/customized/pages/canvas/canvas.js

// customized/pages/canvas/canvas.js
Page({
  onReady: function (e) {
    var cxt_rotate = wx.createContext();//创建并返回绘图上下文context对象。
    var rotate = 0;//默认旋转角度为为0
    setInterval(function () { //无限循环定时函数    
      cxt_rotate.translate(150, 100);//设置坐标系坐标
      rotate++;//旋转角度自增1
      cxt_rotate.rotate(rotate * Math.PI / 180)//设置旋转的角度
      cxt_rotate.rect(0, 0, 50, 50)//设置坐标(0,0)，相对于坐标系坐标，边长为为50px的正方形
      cxt_rotate.stroke();//对当前路径进行描边
      wx.drawCanvas({
        canvasId: 'canvasAutoRotate',//画布标识，对应的cavas-id
        actions: cxt_rotate.getActions()//导出context绘制的直线并显示到页面
      });
    }, 1)
  },

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
    let ctx = wx.createCanvasContext('fontBox');
    ctx.setFontSize(20);
    let rotate = 0
    
    // setInterval(()=>{
    //   rotate++;
    // ctx.translate(0, 0)
      ctx.rotate(rotate * Math.PI / 180);
      
      console.log(rotate)
      ctx.fillText('abcdefg', 0, 0);
    // },2000)
    
    ctx.draw();
  },

})