JavaScript中If语句失效：Canvas点分类绘制结果异常问题

嘿，这问题我太熟了——Canvas的坐标系倒置简直是前端可视化的经典坑！你遇到的异常肯定是因为标记逻辑和Canvas的坐标系统没对齐，或者直线画错了地方。让我一步步给你理清楚：

咱们先掰明白最关键的差异：

• 数学里的坐标系：y轴向上递增，y=x是从左下到右上的直线，"上方"指的是y值比x大的区域
• Canvas的坐标系：y轴向下递增，左上角是(0,0)，右下角是(canvas.width, canvas.height)，这意味着数学里的"上方"对应Canvas里的y值更小的区域

你提到的"视觉上呈现为y=-x"其实是个误区——正确的数学y=x直线在Canvas里应该是从左下角(0, canvas.height)到右上角(canvas.width, 0)的直线（如果画布宽高相等的话），而不是真的画y=-x（那会跑出画布外）。

1. 先把点的标记逻辑搞对 #

如果你的点是基于数学坐标系生成的（比如x和y范围是0到画布宽高），标记逻辑应该是：

// 数学上y > x → 上方 → 标记为1（绿色）
function getPointLabel(xMath, yMath) {
  return yMath > xMath ? 1 : -1;
}

如果你的点直接用Canvas坐标生成，得先转成数学坐标再判断：

function getLabelFromCanvasCoords(xCanvas, yCanvas, canvasHeight) {
  const yMath = canvasHeight - yCanvas; // 转换为数学坐标系的y值
  return yMath > xCanvas ? 1 : -1;
}

2. 正确绘制y=x直线（数学上的） #

在Canvas里画这条直线，要连接对应数学坐标的端点：

function drawYXLine(ctx, canvasWidth, canvasHeight) {
  ctx.beginPath();
  // 数学上(0,0)对应Canvas(0, canvasHeight)
  ctx.moveTo(0, canvasHeight);
  // 数学上(canvasWidth, canvasWidth)对应Canvas(canvasWidth, canvasHeight - canvasWidth)
  ctx.lineTo(canvasWidth, canvasHeight - canvasWidth);
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;
  ctx.stroke();
}
// 注意：如果画布宽高不等，比如width > height，那直线会跑出画布，此时应该取和画布边界的交点：
// ctx.lineTo(height, 0); // 当yCanvas=0时，xMath=height，对应Canvas x=height

3. 按标记正确绘制点 #

根据标记的类别用对应颜色画点，如果是数学坐标记得转成Canvas坐标：

function drawPoint(ctx, xCanvas, yCanvas, label) {
  ctx.fillStyle = label === 1 ? 'green' : 'red';
  ctx.beginPath();
  ctx.arc(xCanvas, yCanvas, 3, 0, Math.PI * 2);
  ctx.fill();
}

// 如果你用的是数学坐标，先转换再绘制：
function drawMathPoint(ctx, xMath, yMath, label, canvasHeight) {
  const xCanvas = xMath;
  const yCanvas = canvasHeight - yMath;
  drawPoint(ctx, xCanvas, yCanvas, label);
}

• 不要直接用Canvas的y坐标和x比较：比如if (yCanvas > xCanvas)，这会完全搞反区域——因为Canvas的y向下，这个判断对应数学上的yMath < xMath，和你预期的标记逻辑正好相反
• 别画y=-x直线：这个方程在Canvas里会从(0,0)延伸到(width, -width)，完全不是你要的数学y=x直线
• 坐标范围要匹配：如果你的点是0-1的归一化值，记得先缩放成画布的宽高再转换坐标

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