HTML5 Canvas绘制反比例函数问题求助

你的推测完全正确——问题出在x趋近于0时，y=2/x的函数值趋近无穷大，导致生成的坐标超出画布范围，同时因为函数在x=0处不连续，直接跨区间绘制会让路径逻辑混乱，最终无法渲染出有效图形。以下是具体解决方案：

关键问题拆解 #

1. 不连续点处理：反比例函数在x=0处无定义，直接从-20遍历到20会跨过这个断点，导致路径包含无效的无穷远点，破坏整个绘制路径。
2. 无效值判断：当x接近0时，y=2/x会生成Infinity，对应的yP也会超出画布范围，这类点应该直接跳过，而不是用moveTo强行添加到路径中。
3. 变量作用域问题：代码中xP、yP未声明为局部变量，会变成全局变量，存在潜在的逻辑冲突。

修改后的完整代码 #

JavaScript #

var canvas = document.getElementById('plotCanvas');
var ctx = canvas.getContext('2d');

var startX = -20;
var endX = 20;
var scaleFactor = 25;
var epsilon = 0.1; // 调整为合适的小值，避免接近0的无效点

ctx.beginPath();
// 绘制左半支：x从startX到-epsilon
for (var x = startX + 0.01; x <= -epsilon; x += 0.01) {
  let xP = (x - startX) * (canvas.width / (endX - startX));
  let y = 2 / x;
  // 跳过无穷大或NaN的情况
  if (!isFinite(y)) continue;
  let yP = canvas.height / 2 - y * scaleFactor;

  // 只处理画布内的点
  if (xP >= 0 && xP <= canvas.width && yP >= 0 && yP <= canvas.height) {
    ctx.lineTo(xP, yP);
  }
}

// 绘制右半支：x从epsilon到endX
for (var x = epsilon; x <= endX; x += 0.01) {
  let xP = (x - startX) * (canvas.width / (endX - startX));
  let y = 2 / x;
  if (!isFinite(y)) continue;
  let yP = canvas.height / 2 - y * scaleFactor;

  if (xP >= 0 && xP <= canvas.width && yP >= 0 && yP <= canvas.height) {
    ctx.lineTo(xP, yP);
  }
}

ctx.strokeStyle = 'blue';
ctx.stroke();

CSS #

canvas {
  border: 1px solid black;
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Function Plotter</title>
</head>
<body>
    <canvas id="plotCanvas" width="400" height="300"></canvas>
</body>
</html>

核心修改说明 #

• 拆分绘制区间：把x的遍历范围拆成[-20, -epsilon]和[epsilon, 20]两段，分别绘制反比例函数的左右两支，避免跨过x=0的断点。
• 过滤无效值：用isFinite(y)判断函数值是否为有效数值，直接跳过无穷大或NaN的情况。
• 优化坐标判断：只将在画布可见范围内的点添加到路径中，无效点直接跳过，不再用moveTo干扰路径。
• 修复变量作用域：将xP、yP声明为局部变量，避免全局污染。

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