“如何让微信小程序获取用户当前位置？使用这3种方式获取准确坐标”_好文分享

微信小程序提供了丰富的Canvas坐标系API，能够实现各种复杂的绘图需求。

如何获取坐标

通过wx.getLocation方法可以获取用户的位置坐标，用于定位功能的实现。

wx.getLocation({
  type: 'wgs84',
  success(res) {
    const latitude = res.latitude
    const longitude = res.longitude
    const speed = res.speed
    const accuracy = res.accuracy
  }
})

Canvas坐标系的基本概念

Canvas坐标系是一个二维坐标系，左上角的点是坐标原点(0,0)，向右为x轴正方向，向下为y轴正方向，Canvas的宽度和高度可以通过组件的属性width和height来设置。

在Canvas坐标系中，有4个概念需要掌握：

像素：Canvas中的最小单位，每个像素对应一个点。
坐标：用于表示一个点在Canvas中的位置，由x和y两个数值组成。
画布：用于绘制图形的区域，通过组件的id属性来获取。
上下文：用于在画布上绘制图形的对象，通过组件的方法getContext(‘2d’)来获取。

Canvas坐标系的常用方法

Canvas坐标系提供了丰富的绘图方法来实现各种各样的图形。

moveTo(x, y)：将画笔移动到指定的坐标(x, y)。
lineTo(x, y)：从当前坐标画一条直线到指定的坐标(x, y)。
arc(x, y, r, sAngle, eAngle, counterclockwise)：绘制一段圆弧，参数分别为圆心的坐标(x, y)、半径r、起始角度sAngle、结束角度eAngle和绘制方向counterclockwise。
rect(x, y, width, height)：绘制一个矩形，参数分别为矩形左上角的坐标(x, y)、宽度width和高度height。
fillText(text, x, y)：在指定的坐标(x, y)处填充文本，参数text为要填充的文本内容。
strokeText(text, x, y)：在指定的坐标(x, y)处绘制文本边框，参数text为要绘制的文本内容。

Canvas坐标系的应用实例

下面是一个简单的Canvas应用实例，绘制一个红色的圆形和一个蓝色的矩形：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.canvas {
  width: 300px;
  height: 300px;
  background-color: #fff;
}

Page({
  data: {
    x: 0,
    y: 0,
    isDrawing: false,
    color: '#ff0000',
    radius: 50,
    rectWidth: 100,
    rectHeight: 50,
  },
  touchStart(e) {
    this.setData({ isDrawing: true, x: e.touches[0].x, y: e.touches[0].y });
  },
  touchMove(e) {
    if (this.data.isDrawing) {
      const context = wx.createCanvasContext('myCanvas');
      context.setStrokeStyle(this.data.color);
      context.beginPath();
      context.arc(this.data.x, this.data.y, this.data.radius, 0, 2 * Math.PI);
      context.closePath();
      context.stroke();
      context.beginPath();
      context.rect(this.data.x - this.data.rectWidth / 2, this.data.y - this.data.rectHeight / 2, this.data.rectWidth, this.data.rectHeight);
      context.closePath();
      context.fill();
      this.setData({ x: e.touches[0].x, y: e.touches[0].y });
      context.draw();
    }
  },
  touchEnd() {
    this.setData({ isDrawing: false });
  },
});