利用Canvas根据经纬度绘制轨迹（一）

**利用Canvas根据经纬度绘制轨迹（一）**

在前面的文章中，我们已经学习了如何使用Canvas绘制简单的图形，如圆、线条等。在本篇文章中，我们将学习如何利用Canvas根据经纬度绘制轨迹。

**什么是轨迹？**

轨迹是一种表示地理位置移动轨迹的图形。它可以用来显示一个物体或人在一定时间内的移动路径。在实际应用中，轨迹常用于导航、交通等领域。

**如何绘制轨迹？**

绘制轨迹需要根据经纬度坐标计算出每个点的位置，然后使用Canvas绘制这些点所构成的图形。具体步骤如下：

1. **获取经纬度数据**:首先，我们需要获取一组经纬度坐标，这些坐标代表了物体或人的移动轨迹。
2. **计算每个点的位置**:根据经纬度坐标，计算出每个点的x、y坐标。由于Canvas使用的是像素坐标，而经纬度坐标是基于球面坐标，因此需要进行转换。
3. **绘制轨迹**:使用Canvas绘制这些点所构成的图形。

**代码示例**

下面是一个简单的例子，利用Canvas根据经纬度绘制一个直线轨迹：

javascript// 获取经纬度数据const latitudes = [37.7749,37.7751];
const longitudes = [-122.4194, -122.4196];

// 计算每个点的位置const points = [];
for (let i =0; i < latitudes.length; i++) {
 const latitude = latitudes[i];
 const longitude = longitudes[i];
 // 转换经纬度坐标为像素坐标 const x = Math.floor((longitude +122.4194) *100);
 const y = Math.floor((latitude -37.7749) *100);
 points.push({ x, y });
}

// 绘制轨迹const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i =1; i < points.length; i++) {
 ctx.lineTo(points[i].x, points[i].y);
}
ctx.stroke();

// 添加轨迹的颜色和宽度ctx.strokeStyle = 'red';
ctx.lineWidth =2;