• 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

VPS Starter Arubacloud
0 głosów
1,172 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,280 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,280 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 317 wizyt
0 głosów
2 odpowiedzi 1,854 wizyt
pytanie zadane 27 kwietnia 2017 w JavaScript przez hydyne Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 409 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...