Pomoc oko JS koda

UniverseLovesYou · 28.05.2018. u 12:13

Pozdrav, treba mi pomoc oko tumacenja dole navedenog koda, jer mi neke stvari nisu bas najjasnije. Stavila sam u komentarima nedoumice. Hvala unapred

Kod:

var context;
var dx= 4; // sta je ovo dx i dy? 
var dy=4;
var y=150;
var x=10;
function draw(){
    context= myCanvas.getContext('2d'); // sta je ovo myCanvas?
    context.clearRect(0,0,300,300); // context je promenjiva, ali da li je u ovom slucaju zapravo objekat sa ugradjenom metodom?
    context.beginPath();
    context.fillStyle="#0000ff"; //boji lopticu ili putanju?
    context.arc(x,y,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();
    if( x<0 || x>300) //ni ovi uslovi mi nisu bas najjasniji. jel ovo - znaci da ide unazad?
        dx=-dx;
    if( y<0 || y>300)
        dy=-dy;
    x+=dx;
    y+=dy;
}
setInterval(draw,10);

Вук Вучко · 28.05.2018. u 13:33

1. dx i dy su pomeraji koji se prave prilikom svakog osvezavanja slike (u tvom slucaju, figura se krece po 4px u svakom pravcu, na svakih 10ms).
2. Canvas ti je HTML5 element (platno) po kojem mozes da vrsis iscrtavanje (tj. u ovom slucaju myCanvas je DOM objekat koji predstavlja taj element u HTML-u).
3. Da, context mozes da posmatras kao neki objekat koji ima potreban API za iscrtavanje.
4. Trebalo bi da popuni sa ovom bojom sve sto si iscrtala nakon podesavanja ovog property-ja (dakle, ovaj property se iskljucivo koristi za boju za popunjavanje, za linije se koristi strokeStyle).
5. To te sprecava da izadjes izvan okvira za iscrtavanje. Ako si dosla do krajnje ivice, pomeraj ostaje isti, samo sa negativnim znakom, sto znaci da ce promeniti smer kretanja objekta.

Ukoliko zelis, i ako te interesuje, mozes da pogledas i Processing.js.
Ako je potrebno dodatno pojasnjenje, ili ako se jave neke nove nedoumice, tu sam da pomognem.

Pomoc oko JS koda

UniverseLovesYou

Početnik

Вук Вучко

Domaćin

Slične teme