Serdecznie witam wszystkich użytkowników.
Zdecydowałem się na zadanie pytania bo nie mogę sobie poradzić z odpowiednim "narysowniem" wykresu tangensa oraz cotangesa w java-script. Używam do tego bloku canvas. Sinus oraz Cosinus bardzo ładnie się rysują, natomiast tangens zamiast wzorcowego wykresu takiego jak na grafikach google wywala jakieś dodatkowe linie. Nie mogę zidentyfikować skąd one się biorą. Bardzo proszę o pomoc z napisaniem poprawnie funkcji rysującej wykres Tangensa oraz Cotangensa. W pliku html jest rzecz jasna templatka oraz element canvas
<canvas style="border:1px solid black;" width="800" height="600"></canvas>
Po stworzeniu pliku html można wrzucić canvas do body a poniższy skrypt roboczo w heada. Liczę że pomożecie. Dziękuję i serdecznie pozdrawiam.
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var range = 100;
var bl = 1;
var rangex = w/range;
var rangey = h/range;
var color = "green";
function uklad()
{
//linie pionowe
ctx.strokeStyle = "black";
for(i=1;i<=Math.floor(rangex*2);i++)
{
ctx.lineWidth = 1/6;
ctx.beginPath();
ctx.moveTo((range/2)*i,0);
ctx.lineTo((range/2)*i,h);
ctx.closePath();
ctx.stroke();
}
//linie poziome
for(i=1;i<=Math.floor(rangey*2);i++)
{
ctx.lineWidth = 1/6;
ctx.beginPath();
ctx.moveTo(0,(range/2)*i);
ctx.lineTo(w,(range/2)*i);
ctx.closePath();
ctx.stroke();
}
//OŚ X
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0,h/2);
ctx.lineTo(w,h/2);
ctx.closePath();
ctx.stroke();
// OŚ Y
ctx.beginPath();
ctx.moveTo(w/2,0);
ctx.lineTo(w/2,h);
ctx.closePath();
ctx.stroke();
for(i=-(rangex/2);i<=(rangex/2);i++)
{
ctx.fillText(i,(i+(rangex/2))*range,h/2);
}
ctx.save();
}
uklad();
ctx.closePath();
ctx.stroke();
function srodek()
{
ctx.translate(w/2, h/2); //przesuwanie pkt 0,0 na środek układu współrzędnych
}
srodek();
function tryg(fun, kolor){
ctx.strokeStyle = kolor; //kolor wykresu funkcji
ctx.beginPath();
for(x = -w/2 ; x <w; x += 0.1) // zaczynam od -w/2 bo poczatek rysowania w srodku ctxvas i zwiekszam co 0.1 dla odpowiedniej ilosci punktów{
{
let y = fun(x);
ctx.lineTo(x * (w/6) ,-y* (h/6));
ctx.stroke();
}
}
tryg(Math.tan, "red");