HTML Canvas绘制超长线条（至(-1e20,-1e20)）失效问题求助

当你尝试在Canvas中绘制到-1e20这种极端大的坐标时线条失效，核心原因是JavaScript双精度浮点数的精度限制：

• JavaScript的Number类型是64位双精度浮点数，只能精确表示±2^53（约±9e15）范围内的整数。当数值超过这个范围，整数部分会丢失精度，变成近似值。
• 当你传入-1e20作为坐标时，这个值已经远超出精确表示范围，Chrome和Firefox的Canvas渲染引擎无法正确计算路径的几何信息，导致线条无法渲染。而-1e5（10万）远小于9e15，所以能正常处理。

解决方法 #

1. 只绘制画布可见范围内的线段

既然你的画布只有200x200，绝大多数极端坐标的线条其实完全在画布外，或者只有一小段在可视区域。可以通过计算线条与画布边界的交点，只绘制可见部分：

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

// 计算线段与画布边界的交点（仅处理从画布内起点到外部终点的情况）
function getCanvasIntersection(startX, startY, endX, endY, canvasWidth, canvasHeight) {
  // 终点在画布内，直接返回
  if (endX >= 0 && endX <= canvasWidth && endY >=0 && endY <= canvasHeight) {
    return [endX, endY];
  }
  
  let intersections = [];
  // 左边界x=0
  if ((startX > 0 && endX < 0) || (startX < 0 && endX > 0)) {
    const t = -startX / (endX - startX);
    const y = startY + t * (endY - startY);
    if (y >= 0 && y <= canvasHeight) intersections.push([0, y]);
  }
  // 右边界x=canvasWidth
  if ((startX < canvasWidth && endX > canvasWidth) || (startX > canvasWidth && endX < canvasWidth)) {
    const t = (canvasWidth - startX) / (endX - startX);
    const y = startY + t * (endY - startY);
    if (y >= 0 && y <= canvasHeight) intersections.push([canvasWidth, y]);
  }
  // 上边界y=0
  if ((startY > 0 && endY < 0) || (startY < 0 && endY > 0)) {
    const t = -startY / (endY - startY);
    const x = startX + t * (endX - startX);
    if (x >= 0 && x <= canvasWidth) intersections.push([x, 0]);
  }
  // 下边界y=canvasHeight
  if ((startY < canvasHeight && endY > canvasHeight) || (startY > canvasHeight && endY < canvasHeight)) {
    const t = (canvasHeight - startY) / (endY - startY);
    const x = startX + t * (endX - startX);
    if (x >= 0 && x <= canvasWidth) intersections.push([x, canvasHeight]);
  }
  
  // 取离起点最近的交点
  if (intersections.length > 0) {
    return intersections.reduce((closest, point) => {
      const dist1 = Math.hypot(point[0] - startX, point[1] - startY);
      const dist2 = Math.hypot(closest[0] - startX, closest[1] - startY);
      return dist1 < dist2 ? point : closest;
    });
  }
  
  // 无交点（完全在画布外）
  return null;
}

// 正常绘制短线条
ctx.lineWidth=2;
ctx.moveTo(100,100);
ctx.lineTo(-1, -1);
ctx.stroke();

// 处理超长线条
ctx.lineWidth=5;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(100,100);

const targetX = -1e20;
const targetY = -1e20;
const intersection = getCanvasIntersection(100, 100, targetX, targetY, canvas.width, canvas.height);

if (intersection) {
  ctx.lineTo(intersection[0], intersection[1]);
} else {
  console.log("线条完全在画布可视范围外");
}

ctx.stroke();

2. 坐标归一化（特殊场景适用）

如果业务逻辑需要保留超大坐标的概念，可以先将坐标按比例缩小到浮点数精确范围内，绘制后再通过ctx.scale等变换还原。这种方法需要注意线条宽度、坐标变换的适配，仅适合必须保留原始坐标逻辑的场景。

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