微信小程序获取坐标

微信小程序获取坐标可以通过wx.getLocation方法实现，需要先在app.json中配置定位权限。

微信小程序API coordinates（Canvas 坐标系）

微信小程序的Canvas坐标系是一个二维坐标系，用于在小程序中绘制图形，在这个坐标系中，左上角的点是坐标原点(0,0)，向右为x轴正方向，向下为y轴正方向，Canvas的宽度和高度可以通过组件的属性width和height来设置。

Canvas坐标系的基本概念

1、像素：Canvas中的最小单位，每个像素对应一个点。

2、坐标：用于表示一个点在Canvas中的位置，由x和y两个数值组成。

3、画布：用于绘制图形的区域，通过组件的id属性来获取。

4、上下文：用于在画布上绘制图形的对象，通过组件的方法getContext(‘2d’)来获取。

Canvas坐标系的常用方法

1、moveTo(x, y)：将画笔移动到指定的坐标(x, y)。

2、lineTo(x, y)：从当前坐标画一条直线到指定的坐标(x, y)。

3、arc(x, y, r, sAngle, eAngle, counterclockwise)：绘制一段圆弧，参数分别为圆心的坐标(x, y)、半径r、起始角度sAngle、结束角度eAngle和绘制方向counterclockwise。

4、rect(x, y, width, height)：绘制一个矩形，参数分别为矩形左上角的坐标(x, y)、宽度width和高度height。

5、fillText(text, x, y)：在指定的坐标(x, y)处填充文本，参数text为要填充的文本内容。

6、strokeText(text, x, y)：在指定的坐标(x, y)处绘制文本边框，参数text为要绘制的文本内容。

Canvas坐标系的应用实例

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

<view class="container">
  <canvas canvasid="myCanvas" class="canvas" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
</view>

.container {
  display: flex;
  justifycontent: center;
  alignitems: center;
  height: 100%;
}
.canvas {
  width: 300px;
  height: 300px;
  backgroundcolor: #ffffff;
}

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 });
  },
});