钉钉小程序-canvas画出四象限

uniapp做钉钉小程序中的一个页面效果。是四象限，看坐标点所在区间属于什么维度。

template模块

<canvas :style="{ 'width':  clientWidth +'px','height': clientHeight + 'px'}" canvas-id="firstCanvas" id="firstCanvas"></canvas>

script模块

<script>
export default {
  data (){
    return { 
        clientWidth: null, // 画布宽度
        clientHeight: null, // 画布高度
        centerX: null, // 确定画布的中心原点
        centerY: null,
        unitScale: null, //确定画布的 单位刻度
    }
  },
  onReady: function(e) {
    let that = this;
    if (that.projectids == 23) {
    // 获取手机屏幕宽高
      uni.getSystemInfo({
          success: function(res) {

            // 1. 画布 宽、高
            that.clientWidth = res.windowWidth - 55;
            that.clientHeight = that.clientWidth * 2 / 3; //宽：高 = 3：2
        
            // 2. 确定画布的中心原点
            that.centerX = 0.5 * that.clientWidth;
            that.centerY = 0.5 * that.clientHeight;

            // 3.刻度
            that.unitScale = that.clientHeight / 20; // 18等份 因为要显示所以显示分为20等份
          }
      });
      that.interval = setInterval(() => {  // 用定时器是因为初始化的时候取不到坐标点
        if (that.xy.x != undefined) {
          that.draw(that.xy.x, that.xy.y)  // 取到数据时再次执行
        }
      }, 100);
    }
  },
  methods: {
    draw(dotX, dotY) {  // 中心点（x,y)
      var context = uni.createCanvasContext('firstCanvas');
      
      // 画X轴
      context.setStrokeStyle("#000");
      context.setLineWidth(2);
      context.moveTo(0, this.centerY);
      context.lineTo(this.clientWidth, this.centerY);
      context.stroke();

      // 画Y轴
      context.setLineWidth(2);
      context.moveTo(this.centerX, 0)
      context.lineTo(this.centerX, this.clientHeight);
      context.stroke();

      // 画 Y 轴的刻度
      for (let i = 0; i < 21; i++) {
         if (i != 0 && i != 20) {
            context.beginPath();
            context.arc(this.centerX, i * this.unitScale, 1.5, 0, 2 * Math.PI, true);
            context.stroke();
          }
      }

      // 画 X 轴的刻度
      for (let i = 0; i < 10; i++) {
        if (i != 0) {
          // x轴 负方式
          context.beginPath();
          context.arc(this.centerX - i * this.unitScale, this.centerY, 1.5, 0, 2 * Math.PI, true);
          context.stroke();

          // x轴 正方式
          context.beginPath();
          context.arc(this.centerX + i * this.unitScale, this.centerY, 1.5, 0, 2 * Math.PI, true);
          context.stroke();
        }
      }

      // 根据接口返回的坐标描点
      context.beginPath();
      let axisLength = this.clientHeight / 2 - 10;
      this.x = dotX * axisLength / 18;
      this.y = -dotY * axisLength / 18;
      context.arc(this.centerX + this.x, this.centerY + this.y, 15, 0, 2 * Math.PI, true);

      context.fillStyle = "rgba(123,161,206,.9)"; //设置填充颜色
      context.fill();
      context.strokeStyle = "rgba(255,255,255,0)";
      context.stroke();
      context.draw();
    },

    canvasIdErrorCallback: function(e) {
      console.error('error', e.detail.errMsg)
    },

    onUnload() {  // 页面卸载时要把定时器请求关掉
      clearInterval(this.interval)
    }
   }
}
</script>