Wątek przeniesiony 2015-12-17 22:36 z Java przez bogdans.

wykres funkcji liniowej javascript, canvas

0

Witam!
Mam pewien problem, ponieważ muszę napisać skrypt związany z rysowaniem wykresu funkcji liniowej canvasem, który pobiera współczynniki za pomocą prompt'a w javascript.
Osobiście nie za bardzo przepadam za javascript i bardzo kiepsko to ogarniam, siedziałam już na tym wiele godzin i nie mam pojęcia co i jak. Gdyby ktoś był tak uprzejmy i dał mi jakieś wskazówki - bez odsyłania mnie do "wujka" google, bo tam już przejrzałam wszystko. Będę wdzięczna.

Na razie mam siatke, utworzoną za pomocą innego źródła:

var a =prompt("podaj wartość")
var b =prompt("podaj wartość")			// pobieranie wartości

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var w = canvas.width;		//zmienna w,h = wymiary płótna
var h = canvas.height;
var range = 100;			//określa ile px będzie miała rzeczywista jednostka
var bl = 1;
var rangex = w/range;
var rangey = h/range;

function siatka() 	//rysowanie siatki, układu współrzędnych
{
        ctx.strokeStyle = "black";
      
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(0,h/2);
        ctx.lineTo(w,h/2);
        ctx.closePath();
        ctx.stroke();
		
		
 
        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);   //oznaczenia osi x
        }
        ctx.save();
		
		
		
}
siatka();

ctx.closePath();
ctx.stroke();

function srodek()
{
        ctx.translate(w/2, h/2); 			//przesuwanie pkt 0,0 na środek układu współrzędnych
       }
srodek();




        
                 ctx.beginPath();
                ctx.moveTo(w/a,0);
                ctx.lineTo((range/b)*1,h);
                ctx.closePath();
                ctx.stroke();

Teraz mam pytanie, jak mam zrobić linię, która będzie zależna od wzoru a * x + b, tak aby wartosci które wpiszę w prompt będą przesuwać ją po układzie ?

0

Możesz to zrobić liniami/kropkami zmieniająć po prostu pozycje co np. odległość x:

                 var y=0.0;
				 b*=-range;
				 for(var x=-(w/2);x<w;x+=rangex){
				    
				    var y =(((-a*x))+b)/rangey;
					ctx.lineTo(x,y);
				 }

Napraw promt:

				var a =parseFloat(prompt("podaj wartość a"));
				var b =parseFloat(prompt("podaj wartość b"));  

1 użytkowników online, w tym zalogowanych: 0, gości: 1