Javascript 绘图双曲线

我试图用lineTo（）方法在html5中画一条双曲线。我有以下代码：

$(function () {

    var context = document.getElementById("myCanvas").getContext("2d");

    context.moveTo(0,198);
    iteration = 0.21

    for(var x = 0 + iteration; x <= 500; x += iteration) {
            context.lineTo(x, 500/(x-250)+200);
    }

    context.stroke();
});

$（函数（）{
var context=document.getElementById（“myCanvas”）.getContext（“2d”）；
上下文。移动到（0198）；
迭代=0.21
对于（var x=0+iteration；x而言，问题在于当x==250时，您正在用无穷大破坏路径

在Javascript中，一个数字除以零等于无穷大。除了2D上下文不接受无穷大作为有效坐标，因此认为整个路径，因为
ctx.beginPath（）

因为
iteration=0.21
从不让
x==250
它不会引起问题，但是使用
iteration=0.2
你将拥有
x==250
相同的
iteration=0.5
或
1
或
0.1
或许多其他值。为函数输入一个适当大的正值或负值e将破坏路径，而不仅仅是无限

您需要确保表达式
f（x）=500/（x-250）+200所给出的坐标不超过2D上下文可以处理的最大值或最小值。（数字是多少我不知道，但任何超出渲染范围的都是可以接受的。）

下面将修复您的函数

var lineStart = true; // semaphore to indicate start of a new line
var iteration = 0.2;
var graphMax = 10000; // |y| the positive max value that should be rendered.

for (var x = 0 + iteration; x <= 500; x += iteration) {

    if (Math.abs(500 / (x - 250)) > graphMax) {
        // skip the point
        lineStart = true;
    } else {
        if (lineStart) {  // is this the start of a line 
            lineStart = false;  // yes so move to and clear semaphore
            context.moveTo(x, 500 / (x - 250) + 200);
        } else {
            context.lineTo(x, 500 / (x - 250) + 200);
        }
    }
}

var lineStart=true；//指示新行开始的信号量
var迭代=0.2；
var graphMax=10000；/| y |应渲染的正最大值。
对于（var x=0+迭代；x graphMax）{
//跳过这一点
lineStart=true；
}否则{
如果（lineStart）{//这是一行的开始吗
lineStart=false；//是，因此移动到并清除信号量
移动到（x，500/（x-250）+200）；
}否则{
lineTo（x，500/（x-250）+200）；
}
}
}