Edytor zadań - object

Opis

Tworzenie obiektu: `object`

Kliknij na przycisk "Pokaż".

Stworzymy obiekt koło, dodamy funkcje rysowania i wypełniania. Sprawimy, że będzie migać. :)

Ustawienie płótna do rysowania canvas na pełnym oknie (białe tło)
Tworzenie obiektu kolo za pomocą literału i jego właściwości {właściwość: wartość, ...}
Dodawanie metod do/dla obiektu (.rysuj, .wypelnij, .przesun) i wywołanie metody.
Sprawdzenie czy można obiekt usunąć, ustawienie na niezdefiniowany (w komentarzu)
Cykliczne wywoływanie funkcji - rysuje tło, okrąg/przesunięte koło naprzemiennie co 1000ms (1s)

Kod

//-----2--- TWORZENIE OBIEKTU-----------
var kolo = {polozenieX : 100, polozenieY : 100, promien: 10, kolor: "red", styl: "puste"};

//  --   zmiana wartości własności:
kolo.polozenieX=100;

//  --   lub
kolo["polozenieX"]=50;

//  --   dodanie własności:
kolo.srednica=2*kolo.promien;

//  --  usunięcie własności:
delete kolo.srednica;

// -----3--- Dodanie metod do obiektu ----
kolo.rysuj = function () {
  ctx.beginPath();
  ctx.fillStyle = this.kolor;
  ctx.arc(this.polozenieX, this.polozenieY, this.promien, 0, 2 * Math.PI);
  if (this.styl=="pelne") {ctx.fill()} else {ctx.stroke()};
  };

kolo.wypelnij = function() {
  ctx.beginPath();
  ctx.fillStyle = this.kolor;
  ctx.arc(this.polozenieX , this.polozenieY , 
  this.promien, 0, 2 * Math.PI);
  ctx.fill();
};

kolo.przesun = function(x, y) {
  ctx.beginPath();
  ctx.fillStyle = this.kolor;
  ctx.arc(this.polozenieX+x , this.polozenieY+y , 
  this.promien, 0, 2 * Math.PI);
  ctx.fill();
}
  // wywołanie metody obiektu:
  kolo.rysuj();
  kolo.przesun(100, 0);
  //usuwanie obiektu (nie można):
  //alert(delete kolo);
  //kolo=undefined;

//----4--- Cykliczne wywoływanie funkcji ----
var i=-1;
function odswiezanie() {
i=-i;
rysujTlo();
if (i==-1) kolo.rysuj() 
  else kolo.przesun(100, 0);
}

setInterval(odswiezanie,1000);
//requestAnimationFrame(odswiezanie);
</script>

Podgląd:

📂

Tworzenie obiektu: object

Tworzenie obiektu: `object`