Рисование гипербола

Question

Я пытаюсь нарисовать гиперболу в html5 с помощью метода lineTo(). У меня есть следующий код:

$(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(); 
}); 

Это отлично работает, но если я изменить итерацию до 0,2 или менее, график не отображается на экране.

Смотреть демо на: http://jsfiddle.net/1kjpjryr/

Любой любая идея, почему графики не удается при определенном значении 0,2?

Спасибо, Jan

Answer 1

Проблема в том, вы развращает путь с бесконечностью, когда х === 250.

В JavaScript число делится на ноль равно бесконечности. Все хорошо, кроме того, что 2D-контекст не принимает бесконечность как действительную координату и, таким образом, рассматривает весь путь с ctx.beginPath() как недопустимый.

Поскольку iteration = 0.21 никогда не позволяет x === 250 это не вызывает проблем, но с iteration = 0.2 вы будете иметь x === 250 же для iteration = 0.5 или 1 или 0.1 или многих других. Infact достаточно большое значение для функции в положительном или отрицательном случае приведет к повреждению пути, а не бесконечности.

Вы должны убедиться, что координаты, заданные выражением 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); 
     } 
    } 
}