我太懂你这个困扰了——把所有GPS点连成一条完整路径后用低透明度stroke，结果不管轨迹怎么交叉重叠，颜色始终是一层浅灰色，完全达不到热力图那种“走的次数越多颜色越深”的效果。

问题的根源其实很清晰：Canvas的stroke()是对整个路径做一次性渲染，哪怕路径有自交叉，它也只会把整个路径当作单一图形处理，透明度不会在重叠区域重复叠加。

你想到的“逐个绘制每一段轨迹”的思路完全戳中了要害，这是解决这个问题最直接有效的方法。具体实现起来也很简单，只需要循环遍历点数组，每次只取相邻两个点绘制一段独立线条，这样每一段都会单独应用透明度，重叠区域自然会因为多次叠加而颜色加深：

// 初始化绘制样式
ctx.strokeStyle = 'rgba(1,1,1,0.1)'; // 注意绘制线条要用strokeStyle而非fillStyle哦
ctx.lineWidth = 2; // 根据需求调整线条宽度
ctx.lineJoin = 'round'; // 让线段连接处更平滑，避免出现细微断点

// 逐段绘制轨迹线段
for (let i = 0; i < points.length - 1; i++) {
  const currPoint = points[i];
  const nextPoint = points[i + 1];
  
  ctx.beginPath();
  ctx.moveTo(currPoint.x, currPoint.y);
  ctx.lineTo(nextPoint.x, nextPoint.y);
  ctx.stroke();
}

这里有两个小细节可以优化效果：

• 替换fillStyle为strokeStyle，你之前的代码里用错了样式属性；
• 加上lineJoin = 'round'，能让相邻线段的连接处更顺滑，避免逐段绘制带来的细微间隙或凸起。

如果你的GPS轨迹点数特别多（比如上万级），逐段绘制可能会有轻微性能损耗，这时候可以用离屏Canvas做优化：先在离屏Canvas上完成所有线段绘制，再一次性把内容同步到主Canvas，减少主画布的绘制次数：

// 创建离屏Canvas并设置尺寸
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCanvas.width = ctx.canvas.width;
offscreenCanvas.height = ctx.canvas.height;

// 在离屏Canvas完成所有线段绘制
offscreenCtx.strokeStyle = 'rgba(1,1,1,0.1)';
offscreenCtx.lineWidth = 2;
offscreenCtx.lineJoin = 'round';

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

// 将离屏Canvas内容绘制到主Canvas
ctx.drawImage(offscreenCanvas, 0, 0);

总的来说，逐段绘制是解决你这个问题的核心方案，既能满足热力图的透明度叠加需求，实现起来也不复杂。

内容的提问来源于stack exchange，提问作者user578895