uniapp Canvas 绘制坐标轴

uniApp的Canvas API允许开发者在Webview组件中创建图形，包括绘制坐标轴。要在uniApp中绘制坐标轴，你可以按照以下步骤操作：

1. **准备环境**：
首先，在uniApp项目中引入`<canvas>`元素，并给它一个id，比如`myCanvas`。

<view class="container">
  <canvas id="myCanvas" canvas-id="myCanvas" style="display:none;"></canvas>
</view>

2. **获取绘图上下文**：
在JavaScript中，通过`uni.createSelectorQuery()`获取到Canvas节点并取得2D渲染上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

3. **设置坐标系**：
设置绘图区域大小，并确定原点位置。例如，如果你想画一个从0到100的x轴和y轴，可以这样做：

ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除原有内容
const width = canvas.width;
const height = canvas.height;
const centerX = width / 2;
const centerY = height / 2;

// 设置坐标轴范围和间隔
const xAxisMin = 0;
const yAxisMin = 0;
const xAxisMax = 100;
const yAxisMax = 100;
const xAxisStep = (xAxisMax - xAxisMin) / 10; // 每个刻度的距离
const yAxisStep = (yAxisMax - yAxisMin) / 10;

4. **绘制坐标线**：
使用`moveTo`和`lineTo`方法绘制x轴和y轴线条：

// x轴
for (let i = xAxisMin; i <= xAxisMax; i += xAxisStep) {
  ctx.moveTo(centerX, height);
  ctx.lineTo(centerX, height - Math.round(i * height / xAxisMax));
}

// y轴
for (let j = yAxisMin; j <= yAxisMax; j += yAxisStep) {
  ctx.moveTo(width, centerY);
  ctx.lineTo(Math.round(j * width / yAxisMax), centerY);
}

5. **添加标签**：
可以利用`fillText`方法在每个刻度上添加数字标签：

// 添加x轴和y轴标签
const fontSize = 14;
for (let i = xAxisMin; i <= xAxisMax; i += xAxisStep) {
  const labelY = height - Math.round(i * height / xAxisMax) - fontSize / 2;
  ctx.fillText(`${i}`, centerX, labelY);
}
for (let j = yAxisMin; j <= yAxisMax; j += yAxisStep) {
  const labelX = Math.round(j * width / yAxisMax) + fontSize / 2;
  ctx.fillText(`${j}`, labelX, centerY);
}

6. **显示结果**：
最后记得将`canvas`元素显示出来：

canvas.style.display = 'block';