Premi “Invio” per saltare al contenuto

Realizzare Giochi in HTML5 Ep. VI: Display Object con CreateJS

Le coordinate del Canvas

Questo articolo è parte della collana Realizzare Giochi in HTML5

Altri articoli in questa collana:

  1. Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I
  2. Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

Per posizionare gli oggetti all’interno dello spazio di riferimento di un Canvas utilizziamo le coordinate, x e y.

Modificando il valore della coordinata x possiamo spostare un elemento sull’asse orizzontale, modificando il valore della coordinata y lo spostiamo sull’asse verticale. Se non indichiamo nessun valore per queste due coordinate il sistema le considera pari a zero, il punto a coordinate x = 0 e y = 0 di un Canvas si trova nell’angolo in alto a sinistra.

Adesso inseriremo un secondo cerchio, di colore rosa, alle coordinate [100, 70] vale a dire 100 pixel verso destra e 70 pixel verso il basso, ecco il codice:

 pink_circle = new createjs.Shape();
 pink_circle.graphics.beginFill("#FF6699");
 pink_circle.graphics.drawCircle(0,0,30);
 pink_circle.x = 100;
 pink_circle.y = 70;
 pink_circle.graphics.endFill();
 stage.addChild(pink_circle);

Ed ecco il risultato:

0

loading spinner

Continua a leggere questa collana:

Aggiungi il primo commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *