• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wykres tg oraz ctg na canvas z javascript

Fiszki IT
Fiszki IT
0 głosów
708 wizyt
pytanie zadane 11 października 2017 w JavaScript przez Neronys Bywalec (2,090 p.)

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");

 

komentarz 11 października 2017 przez obl Maniak (51,120 p.)
Niech zgadnę, te dodatkowe linie są w punktach nieciągłości wykresu?
komentarz 11 października 2017 przez Neronys Bywalec (2,090 p.)

Tak wygląda wykres który generuje moja funkcja, powinna zostać tylko środkowa czerwona linia. Bez tych dodatkowych, nie wiem jaki warunek zastosować żeby wywalić tamte punkty.. ;/

komentarz 11 października 2017 przez obl Maniak (51,120 p.)
No bo w tych punktach funkcja ma nieciągłość a twój algorytm rysujący nie bierze tego pod uwagę i gdy mija punkt nieciągłości funkcji przeskakuje z strony dążącej do +nieskończoności na stronę dążącą do -nieskończoności. Musiałbyś to uwzględnić w algorytmie rysowania, żeby te linie nie były rysowane. Innymi słowy musisz napisać algorytm, który sprawdza, czy pomiędzy dwoma kolejnymi krokami nie trafiasz na nieciągłość czasami.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 79 wizyt
0 głosów
2 odpowiedzi 1,092 wizyt
pytanie zadane 27 kwietnia 2017 w JavaScript przez hydyne Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 266 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

84,798 zapytań

133,600 odpowiedzi

296,074 komentarzy

56,045 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...