DEV Community: Roberto

Registro di guerra Lupo solitario

Roberto — Wed, 04 Jan 2023 13:59:56 +0000

Nelle vacanze di natale ho trovato un vecchio libro di quando ero adolescente, più precisamente un libro game (una storia a bivi).

Ai tempi mi ha fatto piacere la lettura, facendomi vedere che non tutti i libri erano noiosi.

Il volume in questione era "I signori delle tenebre", primo numero della collana "Lupo solitario".

Detto questo, volevo farlo leggere anche alle miei figlie ma sapevo che si sarebbero fermate alle istruzioni iniziali, dove bisognava crearsi il personaggio.
Poi la pagina del registro di guerra, dove si dovevano segnare tutti i dati era tutta scarabbocchiata.

Quindi ho fatto un gestionale in Angular che crea e gestisce il personaggio, per adesso solo basato solo sul primo volume.
Man mano che vado avanti con i volumi aggiornerò anche il gestionale.

Il progetto è open source e il codice si trova su github

camizzilla / lone-wolf

LoneWolf

This project was generated with Angular CLI version 14.2.2.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

View on GitHub

La webApp non è collegato a nessun database, quindi non salva nessun dato. Il salvataggio dei dati avviene tutto in locale sul vostro browser o è possibile scaricare una file Json.

Lo potete trovare a questo indirizzo:

camizzilla.github.io

Game javascript: clone BEWITCHED - Commodore VIC-20 Game 1983

Roberto — Thu, 09 Dec 2021 09:04:22 +0000

Find the right colour to open the doors to reach the end of the labyrinth without getting caught by the guardians.

Animazioni con il Canvas di javascript: Come animare con gli sprite

Roberto — Fri, 24 Sep 2021 09:22:20 +0000

Se volessimo creare una presentazioni animata o un videogioco con una grafica "non vettoriale" ma con una grafica raster (pixellosa) dovremmo imparare a gestire gli sprites.

Ma cosa sono gli sprites?
Gli sprites sono delle immagini in sequenza che fatte scorrere ad una certa velocità ingannano l'occhio facendolo sembrare in movimento.

Per implementare gli sprite nel canvas abbiamo bisogno di uno spritesheet cioè un immagine che contiene tutte le sequenze della nostra animazione. Come in questo esempio.

Se come me non siete dei grandi grafici, ci sono un sacco di risorse in internet. Li potete trovare tra gli archivi di immagini o in siti come

https://itch.io/game-assets
https://www.spriters-resource.com/ (quest'ultima è sotto copyright, quindi se li usate fatelo per uso personale)
https://opengameart.org/

Io ho scelto di animare questo cane che corre, è uno spritesheet semplice su una sola riga con 4 fasi dell'animazione, più avanti vedremo sprite più complessi su più righe e che comanderemo con i tasti.

INIZIALIZIAMO

Iniziamo inizializando un elemento canvas grande 600x400, stampando, a video l'immagine (spritesheet) che contiente i 4 sprite una volta caricata.

HTML

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;



let img = new Image();
img.src = 'https://i.ibb.co/tmdzwtT/dog.jpg';
img.addEventListener('load', () => {
  ctx.drawImage(img, 0, 0);
})

Una volta caricata, si vede un'immagine 600 x 200 divisa in 4 frame della grandezza di 150 x 200 che comporranno la nostra animazione.
Visto che a noi serve solo un frame alla volta dobbiamo creare una maschera di 150 x 200 che mostra solo un frame alla volta.

Questa operazione di ritaglio si può fare direttamente con il metodo ctx.drawImage che ha delle opzioni che ci premettono di visualizzare a video sono una pozione rettangolare di un immagine.

Avevo già trattato in questo post, "Canvas Javascript: Come disegnare immagini", come fare, ma oggi andremo a vedere come si può utilizzare questo metodo per creare del movimento.

Ritagliamo lo spritesheet in modo da visualizzare solo il primo frame.
Partiamo dalla coordinata dell'immagine 0, 0 (rX, rY) e tagliamo una porzione larga 150px (rL) e lunga 200px (rA) ( il rettangolo che contiene il primo frame)

Posizioniamo la maschera sul canvas, circa al centro, alle coordinate 225, 100 (x,y) e lo visualizziamo con le stesse dimensioni del ritaglio, 150x200px (l, a)

img.addEventListener('load', () => {
  //ctx.drawImage(img, rX, rY, rL, rA, x, y, l, a);
  ctx.drawImage(img, 0, 0, 150, 200, 225, 100, 150, 200);
})

Adesso per creare l'effetto di movimento dobbiamo spostare la funzione ctx.drawImage in un ciclo e far scorrere la maschera di ritaglio ad ogni frame e una volta finiti tornare al frame 0.

Creiamo una funzione loop che si chiamerà in modo ricorsivo grazie al metodo requestAnimationFrame ad ogni fine ciclo.

requestAnimationFrame è il metodo creato apposta per gestire i cicli nel canvas. Ne parlo in maniera più approfondita in questo post: "Animazioni con il Canvas di javascript: Come cos'è e come implementarlo con un esempio base"

let img = new Image();
img.src = 'https://i.ibb.co/d264Yhf/greeting.png';
img.addEventListener('load', () => {
  requestAnimationFrame(loop)
})

let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, 150, 200, 225, 100, 150, 200);
  requestAnimationFrame(loop)
}

Al caricamento dell'immagine viene chiamata la funzione loop.
Che ha 3 metodi al suo interno: clearRect che ripulisce il canvas, il metodo che stampa a video che abbiamo creato precedentemente e per ultimo requestAnimationFrame(loop) che richiama se stessa.

Il prossimo passo è quello di aumentare il frame ad ogni ciclo.
Nel nostro caso sono 4 frames e vanno dal frame 0 al frame 3.

I frame si trovano ad una distanza di 150px, quindi il valore per rX sarà di:

0 per il frame 0
150px per il frame 1
300px per il frame 2
450px per il frame 3

Da questo si può inturire che se moltiplichiamo il numero del frame con la larghezza (Lr) otterremo il valore rX.

rX = lr * frameCounter;

let lr= 150;
let frameCounter = 0;
let rX = 0

let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  rX = lr * frameCounter;
  ctx.drawImage(img, rX, 0, lr, 200, 225, 100, 150, 200);

  framecounter < 3 ? frameCounter++ : frameCounter = 0;
  requestAnimationFrame(loop)
}

Nel primo ciclo il secondo argomento prende come risultato della moltiplicazione 150 * 0, quindi il ritaglio partirà dalla posizione 0, poi il framecounter aumenta di uno perchè il "frame" è minore di 3.
Nel secondo ciclo, il frame vale 1 che moltiplicato a 150 fa rX: 150... e cosi via 150 * 2 = 300, 150 * 3 = 450 e poi l'animazione ricomincia perchè il valore frame non è maggiore di 3 e il valore di framecounter tornerà a 0.

Se dovessimo lasciare il codice così, il nostro cane correrebbe troppo veloce, perchè gli fps, frame per secondo, sono troppo alti.

Gli fps sono dei valore che indicano quante volte il ciclo viene riprodotto in un secondo.

Niente paura, nel prossimo post, spegherò in maniera semplice cos'è l'fps e qual'è la tecnica per implementarlo al meglio.

Per adesso gli applicheremo un setTimeout che non è la miglior soluzione, ma sicuramente la più veloce

let lr= 150;
let frameCounter = 0;
let rX = 0

let framesPerSecond = 10;

let loop = () => {
  setTimeout( () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    rX = lr * frameCounter;
    ctx.drawImage(img, rX, 0, lr, 200, 225, 100, 150, 200);

    frameCounter < 3 ? frameCounter++ : frameCounter = 0;
    requestAnimationFrame(loop)
  }, 1000 / framesPerSecond);

}

CONCLUSIONE

Abbiamo visto come gestire un animazione semplice con gli Sprites.
Successivamente vedremo gli fps per la gestire la velocità dei frame, come gestire SpriteSheet su più righe e come unire i comandi di tastiera con le animazioni.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.

Creare una maschera di ritaglio con canvas

Roberto — Sun, 16 May 2021 15:51:58 +0000

Vediamo come creare una maschera di ritaglio con il canvas.
Ma cos'è una maschera di ritaglio?

Per capire di cosa si tratta facciamo un esempio e prendiamo due elementi, un immagine di un tramonto e una scritta e li mettiamo uno sopra l'altro. Vedremo una scritta soprapposta ad una foto.

Ma noi vogliamo che il testo diventi una maschera di ritaglio, nascondendo tutto quello che si trova subito sotto tranne la scritta stessa che mostrerà la parte sottostante come se fosse ritagliata, per l'appunto.

Adesso che abbiamo capito vediamo come applicarla nel canvas.
Ci sono due modi per applicare il ritaglio, vediamo le differenze.

Iniziamo preparando le parti in comune per tutti e due i modi, inizializziando il canvas e carichicando un immagine.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;

let img = new Image();
img.src = 'https://source.unsplash.com/GPPAjJicemU/600x600';
img.addEventListener('load', () => {
  ctx.drawImage(img, canvas.width, canvas.height);
})

Clip

Il primo modo per "ritagliare" è il metodo clip().

Questa tecnica è utilizzata quando vogliamo creare una maschera di ritaglio a partire da una figura geometrica.

Le figure geometriche si creano in vario modo, ma sono quasi tutte accomunate dal fatto che per visualizzarle a video bisogno usare il metodo fill() o stroke().
Per fare far diventare una maschera di ritaglio una figura bisogna usare il metodi clip(), al posto dei metodi di visualizzazione a video.

Naturmalmente quelli che non sono soggetti a questi metodi non possono essere usati come maschera di ritaglio con clip() e sono:

...

let img = new Image();
img.src = 'https://source.unsplash.com/GPPAjJicemU/600x600';
img.addEventListener('load', () => {

  ctx.rect(200, 150, 200, 200);
  ctx.arc(300, 100, 50, 0, 2 * Math.PI);
  ctx.clip();

  ctx.drawImage(img, 0, 0);
})

In questo esempio abbiamo creato due figure: un cerchio e un quadrato che andreanno a visualizzare il contenuto sotto stante l'immagine con il metodo clip().

globalCompositeOperation

Un secondo metodo è sfruttare la proprietà del context: globalCompositeOperation, questa definisce come due elementi si debbano sovrapporre.

Ci sono tanti modi con effetti diversi per sovrapporre due elementi e che vedremo in un post dedicato, in questo caso utilizzeremo solo quello che fa al caso nostro.

ctx.globalCompositeOperation = 'destination-atop';

Ma vediamo all'opera

img.addEventListener('load', () => {
  ctx.drawImage(img, 0, 0);

  ctx.globalCompositeOperation = 'destination-atop';

  ctx.font = 'bold 132px sans-serif';
  ctx.fillText('SUNRISE', 10, 150)

})

In questo caso l'elemento sottostante il globalCompositeOperation diventerà la maschera di ritaglio dell'immagine sovrastante.

Come vedrete dal codice questo metodo non ha più il vincolo delle forme, ma si può usare con qualsiasi elemento grafico, come nel nostro caso, il testo.

Conclusione

I due metodi sono molto simili. A mio parere quando si deve fare una maschera con delle figure geometriche è sempre meglio usare il metodo clip(). Perchè è più veloce e da meno problemi di implementazione.
Mentre userei globalCompositeOperation quando si vuole fare una maschera con il testo.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.

Canvas Javascript: a powerful solution for web’s graphic

Roberto — Sun, 14 Mar 2021 19:09:09 +0000

<canvas> is an Html5 element for graphic totally managed by javascript. It is the right solution for 3d and 2d animations, for videogames and for the handling of your photos and videos.

It was born to replace the old Flash, a third parts’ technology which was very popular in the 2000’s thanks to its amazing animations never seen before. Flash anyway had some serious security problems, so they decided to replace it with a native html element.

This html element let us build a canvas on our browser so we can create a rectangular space (any size we want!) where we can create our digital masterpieces.

Canvas’ pros 🔺 and cons 🔻

Pros

Animations are faster and very fluid
We can control every single element thanks to javascript
Optimized memory’s management. That means an enormous save of memory!
Amazing calculation management. For example: videogames need technology which can manage all the inputs without slowing down, because every second (time depends on frame rate) it has to calculate movements, collisions, keyboard’s or mouse’s inputs on a variety of elements that are on canvas

Cons

It’s complex, which doesn’t mean difficult, but we have to study it and learn it.
If you have to animate few elements (maybe a click on the mouse or you just don’t need always to refresh) you don’t have to make it difficult with canvas: you can manage it with css.
It loses speed if we expand the number of elements to manage.

HTML

Due to canvas is totally managed by javascript, the html file will be a basic document with the tag. This one will have an id, that with a lot of creativity, we are going to call myCanvas.

<html>
   <head>
     <meta charset="UTF-8">
     <title>Platform game - single screen</title>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>

   <body>
     <canvas id="myCanvas"></canvas>
   </body>

   <script src="main.js"></script>
 </html>

Html document then will call:

main.js file, from where we can manage everything.
css file, which will add a little bit of style even if it is not fundamental.

CSS

In the css style we’ll fix the canvas at the centre of our display and we’ll add to it a black frame so it will be easier to see it.

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

canvas {
     border: 3px solid black;
 }

JS

This is the most important and the most complex part so, in this post, we’ll just see how to initialize it.

let canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;

let ctx = canvas.getContext('2d');

This is a script that initialize the canvas. We’ll use it very often, because this technology will be the start for some of our next projects.
We caught the canvas element thanks to document.querySelector("#myCanvas") thanks to its id #myCanvas and we saved it in the canvas variable.
We had assigned height and width to the canvas thanks to height and width proprieties. Standard sizes are 300px x 150px.
With the getContext method we choose the context to work in, in our case is the “2d” and thanks to this we have access to the functions which let us to draw and handle the bidimensional canvas.
If we had specified “webgl” instead of “2d”, now we would work on with “3d” method.

CONCLUSION

This is the result, for now it's a bit sad, but what we have learned today is just the tip of the iceberg, in future posts we will explore many features of this fantastic technology.

If you have any tips, suggestions or constructive critics leave me a comment below or contact me through my social network (linkedin, twitter).

Canvas js: Come disegnare sul canvas al passaggio del mouse

Roberto — Wed, 10 Mar 2021 08:56:49 +0000

In questo articolo trasformeremo il mouse in un pennello che premuto il tasto sinistro del mouse lascierà una traccia sulla nostra tela virtuale.

INIZIALIZIAMO

Inizializiamo un elemento grande 600x400

HTML

<canvas id="myCanvas"></canvas>

let canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;

let ctx = canvas.getContext('2d');

TRACCIAO LA LINEA

Creiamo una funzione che ha il compito di tracciare una linea nera spessa un 1px prendendo come argomento le coordinate iniziali x1, y1 da dove partità la linea e le coordinate finali x2, y2.

Per ulteriori informazioni su come funzionano le linee ti rimando a questo articolo

let drawLine = (x1, y1, x2, y2) => {
  ctx.beginPath();
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1;
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.closePath();
}

ASCOLTATORI DI EVENTI

Per tenere monitorati le azioni del mouse, abbiamo bisogno di creare dei 'EventListener'.
L' 'EventListener' è un metodo degli elementi che tiene controllato un'azione specifica e qualora questa scattasse fa partire la funzione che gli abbiamo passato.
Questa funzione ha come argomento, un oggetto con i dati del evento, ad esempio la posizione del mouse in quel momento.

Per il nostro scopo ci servirà sapere quando si muove il mouse (evento) nel canvas (elemento da controllare) e che ci passi le coordinate x e y di dov'è.

canvas.addEventListener('mousemove', e => console.log(e.offsetX, e.offsetY)

In questo caso, il canvas è l'elemento da tenere sotto controllo e l'evento è il mousemove, che vuol dire che appena il mouse si muove nel canvas, scatta e fa partire una funzione che passa come argomento un oggetto di dati tra cui e.offsetX, e.offsetY che ci dicono dove si trova il puntatore del mouse in quel momento.

Altri due eventListener che ci serviranno sono:

mousedown: che si attiva se un bottone del mouse è stato premuto.
mouseup: si attiva appena un bottone è stato rilasciato.

I due eventi sono complementari prima scatta il mousedown e dopo mouseup.

Per tenere traccia che il pulsante è stato premuto creiamo un booleano che diventa vero appena il pulsante viene premuto.

canvas.addEventListener('mousedown', e => {
   x = e.offsetX;
   y = e.offsetY;
   isDrawing = true;
});

canvas.addEventListener('mousemove', e => {
  if (isDrawing === true) {
    drawLine(x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});

window.addEventListener('mouseup', e => {
  if (isDrawing === true) {
    isDrawing = false;
  }

'mousedown':
- Evento: scatta quando viene cliccato un pulsante del mouse sul canvas.
- Azione: salva le coordinate del cursore nelle variabili x e y e fa diventare 'vero' la variabile isDrawing.
'mousemove':
- Evento: scatta se il mouse si muove nel canvas
- Azione: se isDrawing è vero (un bottone del mouse è stato premuto) inizio a disegnare facendo partire la funzione drawLine(), passandogli come argomenti le coordinate salvate precedentemente come punto di partenza e le coordinate di dove si trova il puntatore come punti finali. Poi salva le nuove coordinate nelle variabili x, y.
'mouseup':
Evento: scatta appena **il bottone premuto viene rilasciato* sul elemento window. Non controlliamo più solo sul canvas ma su tutta la finstra.
*Azione: il valore di isDrawing torna a false e anche se muovo il mouse non traccia più.

Potremmo aver finito qui, ma prima di vedere il risultato finale vorrei fare una miglioria.

SEPARARE I PULSANTI DEL MOUSE

Adesso qualsiasi pulsante del mouse teniamo premuto è indifferente.
Modifichiamo il programma in modo che il tasto destro sinistro,
mentre il tasto destro ci permetta di cambiare colore tra una gamma predefinita.

Nell'oggetto (e) che ci viene passato nei listener mousedown e mouseup c'è la proprietà button che ci indica quale bottone del mouse è stato premuto (o rilasciato).

tasto sinistro : 0
tasto centrale (rotella): 1
tasto destro: 2

Modifichiamo i due listener

canvas.addEventListener('mousedown', e => {
  if( e.button === 0 ){
    x = e.offsetX;
    y = e.offsetY;
    isDrawing = true;
  }
});

window.addEventListener('mouseup', e => {
  if (isDrawing === true && e.button === 0) {
    isDrawing = false;
  }
});

Solo se il bottone premuto/rilasciato è il sinstro (0) la variabile isDrawing verrà valorizzata.

CAMBIO COLORE

Ogni volta che premiamo il tasto destro dobbiamo fargli cambiare colore.
Iniziamo con il creare un array con i nomi dei colori che vogliamo e un'altra variabile con l'indice che punterà al colore inizializzata a 0.

colorIndex = 0;
const colors = ['red', 'blue', 'green', 'orange'];

let drawLine = (x1, y1, x2, y2) => {
  ctx.beginPath();
  ctx.strokeStyle = colors[colorIndex];
  ctx.lineWidth = 1;
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.closePath();
}

Così facendo la nostra riga verrà tracciata di rosso, come il primo valore dell'array ([0]).

Aggiungiamo nel listener 'moveup', potevo aggiungerlo anche al movedown o addirittura fare un nuovo listener che scattava al 'click'.

window.addEventListener('mouseup', e => {
  ...

  if( e.button === 2 ){
    colorIndex <= colors.length ? colorIndex++ : colorIndex = 0;
  }
});

Se il bottone rilasciato è il 2, quindi il destro e se l'indice (colorIndex) è minore o uguale alla lunghezza dell'array vai al colore successivo se no torna la primo.

CONTEXTMENU

Di default quando si preme il tasto destro del mouse appare un menù che in questo frangente noi non vogliamo.
Per toglierlo esiste un listener apposta il contextmenu che permette di gestirlo.

window.addEventListener("contextmenu", e => e.preventDefault(), false);

Senza andare troppo per le lunghe, questo riga risolve il nostro problema.

Ecco la nostra tela dove potrete disegnare i tuoi capolavori.

CONCLUSIONE

In questo articolo abbiamo visto come funzionano gli eventListener e come si gestiscono.
Quest'ultimi sono una parte fondamentale per l'interattività nel canvas.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social (linkedin, twitter).

Animazione canvas js: come fare rimbalzare delle palle per lo schermo

Roberto — Tue, 02 Mar 2021 08:13:16 +0000

Ho già affrontato le animazioni in questo articolo dove ne ho parlato in maniera basica.

Come esempio ho fatto muovere un cerchio da un lato all'altro del canvas. Un animazione molto semplice e bruttina, ma che era giusto per lo scopo.
Per questo in questo articolo impareremo qualcosa di più articolato (ma non troppo).

Nel primo esempio faremo muovere una palla in 2d in giro per lo schermo e rimbalzerà nella direzione opposta toccato lo schermo.

INIZIALIZIAMO

Inizializiamo un elemento grande 600x400

HTML

<canvas id="myCanvas"></canvas>

let canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;

let ctx = canvas.getContext('2d');

FUNZIONE DI RENDERING

Creiamo un funzione ricorsiva che servirà per il rendering dell'animazione, quindi avrà il compito di ripetere il codice al suo interno ciclicamente.

Tutto questo grazie al metodo requestAnimationFrame() che chiameremo, una fuori dalla funzione per chimarla la prima volta e una all'interno per creare il loop.

let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height  / 2, 30, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.lineWidth = 3;
  ctx.strokeStyle = '#000';
  ctx.stroke();

  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)

All'interno della funzione loop() abbiamo:

la funzione che pulisce il canvas ad ogni ciclo
i metodi che disegnano un cerchio rosso con il contorno nero al centro (canvas.width / 2, canvas.height / 2) del canvas
il metodo che richiama la funzione loop. Grazie a quest'ultimo metodo la funzione verrà richiamata circa 60 volte al secondo (60 fps).

Come si può vedere per disegnare un solo cerchio ci vogliono tante righe di codice, pensate se dovessimo disegnare più elementi, sarebbe un casino e non è riutilizzabile.

CLASSE JS

Per questo creeremo una classe Circle che darà origine a quanti cerchi vogliamo e dove avremmo il totale controllo.

class Circle {
  constructor(){
    this.x = canvas.width / 2;
    this.y = canvas.height / 2;
    this.radius = 30;
    this.color = 'red';
  }

  draw(){
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#000';
    ctx.stroke();
  }
}


let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.draw();
  requestAnimationFrame(loop)
}

let ball = new Circle();
requestAnimationFrame(loop)

Grazie alla classe Circle, con il comando new abbiamo salvato un'istanza della classe nella variabile ball .

Per ultimo abbiamo sostituito all'interno della funzione loop, il codice che disegnava un cerchio con il metodo draw() della variabile ball.

Il risultato finale non è cambiato ma il codice è più ordinato e riutilizzabile.

MUOVIAMO LA PALLA

Per far muovere la palla, aggiungiamo due proprietà nel costruttore della classe Circle che indicano di quanti pixel la nostra palla si dovrà spostare, una è per lo spostamento orizzontale e l'altra è per lo spostamento verticale.

class Circle {
  constructor(){
    this.x = canvas.width / 2;
    this.y = canvas.height  / 2;
    this.radius = 30;
    this.color = 'red';
    this.speedX = 3;
    this.speedY = 3;
  }
  ...

Queste due proprietà dovranno sommarsi ad ogni ciclo del loop, this.speedX con this.x e this.speedX con this.y. Quindi creiamo un nuovo metodo nella classe che compirà questo compito e nella funzione loop richiamiamo questo metodo che ho chimato update().

class Circle {
  constructor(){
    ...
  }

  draw(){
    ...
  }

  update(){
    this.x += this.speedX;
    this.y += this.speedY;
  }


let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.update();
  ball.draw();
  requestAnimationFrame(loop)
}

...

La nostra funzione loop adesso cosa fa?

cancella tutto quello che c'era disegnato nello schermo
aggiunge 3px alle due coordinate della palla.
disegna la palla sulle nuove coordinate.
ricomincia il giro facendo ripartire la funzione stessa.

Tutto questo è talmente veloce che si vede solo il movimento della palla.

BORDI

Se provassimo il nostro script, la palla schizzerebbe fuori dai bordi per non tornare più.
Per questo dobbiamo recintare il nostro canvas in modo che appena la palla tocchi uno dei quattro bordi rimbalzi indietro.

Per fare questo dobbiamo controllare quando la circonferenza della palla tocca un bordo.
Dobbiamo tenere conto anche del raggio del cerchio oltre alle coordinate se no la nostra palla fuoriuscirà del canvas come nell'immagine sottostante.

Vediamo le 4 condizioni per la quale la palla dovrà rimbalzare:

Margine sinistro: Se la x meno il raggio (x - r) è minore di 0
Margine destro: Se la x più il raggio (x + r) è maggiore della lunghezza del canvas (canvas.width)
Margine superiore: Se la y meno il raggio (y - r) è minore di 0
Margine inferiore: Se la y più il raggio (y + r) è maggiore della altezza del canvas (canvas.height)

Traduciamo il tutto in un metodo della classe, edgeIsTouched(), richiamata poi nel update()

update(){
    this.edgeIsTouched();
    this.x += this.speedX;
    this.y += this.speedY;
  }

  edgeIsTouched(){
    if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
      this.speedX = -this.speedX;
    } 
    if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
      this.speedY = -this.speedY;
    }

Nel primo if controlla se vengono superati i margini destra e sinistra, se così fosse, il valore dello speedX cambia di segno, se questo era positivo diventa negativo e viceversa, così la x andrà nel verso opposto a dove stava andando.

Uguale per quanto riguarda la y il controllo sui margine superiore e inferiore.

100 Palle per lo schermo

Modifichiamo il nostro programma per fare in modo che invece di una palla in giro per lo schermo ci siano 100 palle di dimensioni e colori diversi.

Randomiziamo la dimensione, il colore e la direzione.
Nel costruttore della classe, al posto dei valori del raggio, colore e delle due direzioni mettiamo la funzione Math.random() che passa un valore casuale.

class Circle {
  constructor(){
    this.x = canvas.width / 2;
    this.y = canvas.height  / 2;
    this.radius = Math.random() * (30 - 10) + 10; 
    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    this.speedX = Math.random() * 5 - 2.5;
    this.speedY = Math.random() * 5 - 2.5;
  }

La funzione Math.random() ritorna un numero causale da 0 a 1, per questo dobbiamo dotarlo di un range massimo e minimo nel quale stare.

this.radius = Math.random() * (30 - 10) + 10; Il raggio della palla sarà compreso tra 10 e 30 px.
this.color = 'hsl(${Math.random() * 360}, 100%, 50%)'; Ho randomizzato la tonalità del colore con un range della scala dei colori che va da 0 a 360, mantendendo la saturazione e la luminosità fisse.
this.speedX = Math.random() * 5 - 2.5; Per le direzioni ho un range che va da -2.5 a +2.5, così che mi possa tornare sia un numero positivo ( destra e in basso ), sia un numero negativo ( sinistra e in alto).

Il prossimo passo è creare una funzione init() che crei, grazie ad un _for, 100 instanze della classe Circle e le salvi in un array e che faccia partire il ciclo con requestAnimationFrame .

Modifichiamo la funzione loop() in modo che vengano disegnate tutte e aggiornate tutte le 100 palle contenute nell'array grazie al metodo _forEach e il gioco è fatto.

let balls = []

class Ball {
  ...
}

let init = () => {
  for (i = 0; i < 10; i++) {
    balls.push( new Ball())
  } 
  requestAnimationFrame(loop)
}

let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  balls.map( ball => {
    ball.draw();
    ball.update();
  })
  requestAnimationFrame(loop)
}

init()

Conclusione

In questo tutorial abbiamo visto come animare una e più sfere che rimbalzano nel canvas, spero ti sia piacuto.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.

Animazioni con il Canvas di javascript: Come cos'è e come implementarlo con un esempio base

Roberto — Sun, 21 Feb 2021 14:44:28 +0000

Stavo cercando un metodo per fare animazioni sul web e sono incappato su questa APi nativa di javascript... il canvas.

Capii subito che era uno strumento potente e molto utile per il mio scopo, quindi mi misi subito a studiarlo, non fu facile e ancora adesso penso di sfruttarlo in minima parte.

Una delle cose che più mi piace è che si può gestire interamente con javascript e che a fronte di grafiche complesse mantiene una buona fluidità.

Saranno solo delle spiegazioni basilari che ci serviranno per creare animazioni, grafici e videogiochi più complessi.

Cos'è l'animazione?

L'animazione è una rapida succesione di immagini statiche che ingannano l'occhio, facendole percepire in movimento.

Quando da piccolo mi annoiavo a scuola (molto spesso) mi divertivo a disegnare su gli angoli del libro un omino stilizzato che ad ogni pagina cambiava posizione così che quando lo sfogliavo velocemente si animava.

Ok, i miei non erano così belli.

Animazioni con il canvas

Vediamo come riprodurre questa tecnica nel canvas?

Come esempio faremo muovere un cerchio per il canvas.

Per prima cosa dobbiamo creare un ciclo che disegni l'oggetto ad ogni intervallo di tempo.

La prima funzione js che verrebbe in mente è setInterval(), ma non è adatto per le animazioni perchè ha delle limitazioni da non rendelo la scelta giusta.
Per questo è stato creato il metodo requestAnimationFrame() creato apposta per sopperire a queste limitazioni.

Inizializziamo il canvas.

Questa è una versione breve, se volete apporfondire vi mando in un articolo più completo.

html

<canvas id="myCanvas"></canvas>

let canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;

let ctx = canvas.getContext('2d');

Per gestire l'animazione dobbiamo creare una normale funzione che richiameremo ciclicamente, dove andremo a disegnare un cerchio.

(Canvas javascript : Disegnare figure geometriche con curve, per chi avesse bisogno di un ripassino.)

let loop = () => {
   ctx.beginPath();
    ctx.arc(0, 200, 50, 0, 2 * Math.PI);
    ctx.stroke(); 
};

La funzione che abbiamo chimamato loop() deve essere chiamata per la prima volta dal metodo requestAnimationFrame che come parametro ha quest'ultima. La funzione loop va passata senza parentesi, perchè non dobbiamo chiamarla ma... passarla. Il metodo avvisa il bowser di preparsi che verrà usata una funzione per gestire l'animazione.

let loop = () => {
   ctx.beginPath();
    ctx.arc(0, 200, 50, 0, 2 * Math.PI);
    ctx.stroke(); 
};
requestAnimationFrame(loop);

Per chiudere il cerchio, la funzione loop verrà richiamata alla fine con il metodo requestAnimationFrame così da diventare ricorsiva.

let loop = () => {
   ctx.beginPath();
    ctx.arc(0, 200, 50, 0, 2 * Math.PI);
    ctx.stroke(); 
   requestAnimationFrame(loop);
};

requestAnimationFrame(loop)

Il programma per adesso disegna un cerchio, ma non si muove perchè i valori x e y sono sempre fissi.

Vediamo come spostaro nelle varie direzioni.
Per prima cosa decidiamo di quanti pixel vogliamo spostarlo, in questo caso di 5px.
Quindi ad ogni ciclo lo sposteremo di 5px.

Per la direzione ho creato uno schemino esemplicativo, così da rendermi la spiegazione più facile.

Se vogliamo farlo muovere sul asse orizzontale ad ogni ciclo dobbiamo aggiungere un valore positivo alla x se vogliamo che si muova alla destra, mentre se gli assegnamo un valore negativo si sposterà a sinistra.
Uguale per l'asse verticale, valore positivo per il basso e valore negativo per mandarlo in alto.

Per le diagonali dobbiamo assegnare ad entrambi le posizioni un valore, ma alternando positivo e negativo in base alla direzione da prendere, come nello schemino.


const step = 5;
let x = 0;

let loop = () => {
   ctx.beginPath();
   ctx.arc(x, 200, 50, 0, 2 * Math.PI);
   ctx.stroke(); 
   x += step;
   requestAnimationFrame(loop);
};

requestAnimationFrame(loop)

Abbiamo creato una costante step che ci dice di quanto si sposterà il cerchio e l'altra è la variabile x che sostituirà il primo argomento della funzione arc, adibita allo spostamento orizzontale verso destra, inizializzata a 0.

*Nella funzione loop ho aggiunto il comando che aumentera la posizione x * di 5px (step) ad ogni ciclo.

Questo è il risultato e non è quello che ci aspettavamo.

In precedenza ho scritto che l'oggetto si sposta, perchè è quello che vedono i nostri occhi, in verità, l'oggetto non si sposta ad ogni ciclo, ma viene disegnato in una nuova posizione, percui il cerchio precedentemente disegnato non sparisce, ma si somma ogni volta.

La soluzione a questo problema è che ad ogni inizio ciclo il canvas venisse ripulito e per fare questo ci viene in contro una funzione specifica, ctx.clearRect, che permette di cancellare una porzione rettangolare del canvas.

Se lo facciamo partire dal punto di origine (x:0, y:0) e lo facciamo grande delle stesse dimensioni del canvas, ripulirà il tutto, riportandolo come nuovo.

Un altro problema riscontrato è che una volta uscito dal margine destro, il cerchio partirà per la tangente e non lo rivremo più.

Ci sono varie soluzioni, come quello di creargli dei bordi, ma per adesso lo faremo ripartire dal margine sinistro ogni volta che esce dallo schermo.

const step = 5;
let x = 0;

let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  
  ctx.beginPath();
  ctx.arc(x, 200, 50, 0, 2 * Math.PI);
  ctx.stroke(); 
  x = x + step;
  x === canvas.width + 50 && (x = -50)
  requestAnimationFrame(loop)
};

requestAnimationFrame(loop)

Quando la x del cerchio più il raggio ( se no sparisce quando il centro del cerchio raggiunge il margine) raggiunge il margine destro ricompare nella posizione x = 0 - 50, margine sinistro che vale 0 meno il raggio.

CONCLUSIONE

Abbiamo visto come funziona un animazione con il canvas, facendo spostare un cerchio. Ok, non è una grande animazione, ed è una cosa che si può fare con il css, ma questo ci ha permesso di mettere le basi per animazioni più complesse.

Nel prossimo articolo andremo ad imparare come gestire gli fps e la velocità con il quale si spostera l'oggetto.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.

EXTRA

Vi lascio con il codice un po' più ordinato e riutilizzabile, usando le classi in js.

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;

class Circle {
  constructor(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.step = 5;
  }
  draw(){
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.stroke(); 
  }
  update(){
    this.x += this.step;
    this.whenBorderIsFinished()
  }

  whenBorderIsFinished(){
    this.x === canvas.width + this.radius && ( this. x = -this.radius)
  }
}

let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  circle.draw();
  circle.update();

  requestAnimationFrame(loop)
};

circle = new Circle(0, 200, 50);
requestAnimationFrame(loop);

Canvas javascript: setTransform, tutte le trasformazioni in un unica funzione

Roberto — Mon, 08 Feb 2021 13:43:29 +0000

Ci sono varie trasfomazioni che si possono applicare ad un elemento, si possono traslare, ruotare, scalare e per ognuna c'è una funzione specifica.
In alternativa, il context 2d ci fornisce di una funzionalità molto comoda che le racchiude tutte.

In verità le funzioni sono due, transform e setTransform che sono uguali e utilizzano gli stessi argomenti, si differnziano solo per una caratteristica:

setTransform "resetta" tutte le trasformazioni fatte in precendenza, quindi non si hanno più bisogno di usare il salvamento e il ripripristono di stato. (ho dedicato un paragrafo alla spiegazioni del savataggio/ripristino stato in questo articolo)
Mentre transform somma le varie trasformazioni.

Ad esempio se usiamo due traslation uguali che radoppiano gli oggetti sottostanti,questi verranno quadrupicati, invece se usassimo due setTransform gli oggetti subirebbero la trasformazione solo del secondo, perchè questo cancellerebbe gli effetti del primo, raddopiandoli.

Le due funzioni sono equivalenti, quindi le cose che vedremo sotto valgono anche per l'altra funzione.

ctx.setTransform(so, io, iv, sv, to, tv)

so: scala, quindi, riduce o ingrandisce orizzontalmente
io: inclina orizzontalmente
iv: inclina verticalmente
rv: scala, quindi, riduce o ingrandisce verticalmente
to: trasla (muove) il canvas orizzontalmente
tv: trasla il canvas verticalmente

Da come si può dedurre, nella descrizione degli argomenti si possono dividere per caratteristiche in tre coppie: scala, streccia, trasla.

Di default....
ctx.setTransform(1, 0, 0, 1, 0, 0);

SCALARE

Il primo so e il quarto sv argomenti allarga e rimpicciolisce il canvas.
Di default i valori sono settati entrambi a 1, quindi se volessimo ingrandila del doppio dovremmo passargli 2 come valore o se volessimo dimezzare le sue dimensioni gli passeremmo 0.5... e così via.

ctx.setTransform(2, 0, 0, 2, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(.5, 0, 0, .5, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

INCLINARE (RUOTARE)

Per inclinare una figura in orizzontale si valorizza l'argomento io con un numero radiale da 0 a 1, mentre per inclinarlo in verticale si usa l'argomento iv.

ctx.setTransform(1, .5, 0, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(1, 0, .5, 1, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(150, 50, 100, 100);

Con questi argomenti è possibile anche ruotare la figura, basta passargli lo stesso valore, ma uno positivo e l'altro negativo.

ctx.setTransform(1, .5, -.5, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(150, 50, 100, 100);

let degree = 45;
let radiant = degree * Math.PI / 180;
ctx.setTransform(1, radiant, -radiant, 1, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(250, 0, 100, 100);

Nel secondo quadrato dello script ho usato la formula grado * Math.PI / 180 per trasformare i gradi in radianti e l'ho ruotato di 45gradi.

TRASLARE

Gli ultimi due argomenti to e tv spostano il canvas del valore che gli passiamo sia orizzontalmente sia verticalmente.

ctx.setTransform(1, 0, 0, 1, 100, 100);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(1, 0, 0, 1, -30, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

CONCLUSIONE

Queste funzioni sono molto utili per la trasformazione, in un unico comando fanno risparmiare memoria, righe di codice e tempo.

Spero che l'articolo ti sia piaciuto Se hai dei consigli, suggerimenti o critiche costruttive lasciami un commento qui sotto oppure contattami trammite i miei social.

Canvas Javascript: trasformazioni

Roberto — Tue, 02 Feb 2021 10:58:51 +0000

In questo articolo vediamo le funzioni trasformazione: traslazione (translating), rotazione e scalatura (scaling).

Quando si usano le trasformazioni è buona norma salvare lo stato prima del loro utilizzo, per poi ripristinare lo stato salvato all'occorenza.
Questo perchè con pochi passaggi puoi tornare allo stato iniziale senza dover riscivere tutto a ritroso.

Per capire come funziona il save / restore ho scritto un paragrafetto con un esempio esemplificativo.

SAVE e RESTORE

Il savataggio save() tiene in memoria gli stili e alcune funzioni, come le funzioni trasfosmazione, scritte in precendenza.

Gli stati salvati vengono impilati uno sopra l'altro e ripristinati dall'ultimo stato salvato.

ctx.save: salva lo stato e lo impila in uno stack
ctx.restore: ripristina il primo stato in cima alla pila dei salvataggi (stack)

Analizziamo il programma nell'immagine sovrastante.

nella prima riga salvo lo stato iniziale che sarà il primo stato della nostra pila (stack).
poi aggiungo il metodo che colorerà gli elementi di blu.
salvo di nuovo, in questo caso lo stato tiene in memoria lo stile blu e viene impilata sopra il salvataggio precendente.
Cambiamo ancora colore, questa volta di verde e stampiamo a video un quadrato (1) che sarà di colore verde.
Con ctx.restore() ripristiniamo il primo salvataggio della pila, quindi l'ultimo stato salvato.
Ridisegnamo il quadrato (2), questa volta sarà di colore blu come lo stile salvato sullo stato.
Ripristiniamo l'altro salvataggio di stato, che sarà quello che riporterà il tutto allo stato iniziale.
come ultimo, disegnamo il quadrato che sarà di colore nero, il colore di default.

TRASLAZIONE

Questo metodo **sposta sugli assi x e y il canvas di una distanza che gli passeremo come argomento.
*ctx.translator(x,y).
Tutti gli oggetti disegnati dopo si sposterando di conseguenza.

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 20, 20);

ctx.translate(100, 100);

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 20, 20);

Nello script vediamo due quadrati uguali per dimensioni e posizionati nelle stesse coordinate, ma di colori diversi.
Però il secondo quadrato sarà traslato di 100px in orizzonatale e 100px in verticale perchè abbiamo usato la funzione translate per spostare il canvas.

Nel esempio sottostante ho creato un grafico molto semplice che si crea dinamicamente trammite un array di numeri.
Il posizionamento orizzontale è stato fatto trammite un forEach dell'array che spostava i vari oggetti con traslate.

ROTAZIONE

Come dice si intuisce dal nome e da quello che abbiamo preso dalla traslazione, questa funzione ruota di il canvas come perno il punto di origine (0, 0).

ctx.rotate(radianti);

La funzione rotate prende come valore i radianti e non i gradi, ma niente paura, sostituendo l'argomento con la formula (Math.PI / 180) * gradi possiamo tranquillamente usare i gradi.

Lo script ruota di 45gradi un quadrato, che come perno di rotazione ha il punto di origine del canvas (0,0).

const grade = 45;
ctx.save();
ctx.rotate( Math.PI / 180 * grade );
ctx.fillRect(200, 0, 60, 60);
ctx.restore()

Tutto questo è molto bello, ma poco utile, perché vorremmo scegliere il punto focale dove far ruotare l'oggetto.
In questo caso dobbiamo usare la transizione per scegliere il fulcro del asse di rotazione.

const grade = 45;
ctx.save();
ctx.translate(130, 130);
ctx.rotate( Math.PI / 180 * grade );
ctx.translate(-130, -130);
ctx.fillRect(100, 100, 60, 60);
ctx.restore()

In questo caso abbiamo spostato il punto di rotazione al centro del quadrato, 100 (coordinata) + 30 (metà del lato) = 130, abbiamo ruotato di 45 gradi e poi siamo ritornati alla posizione iniziale usando il traslate con gli stessi valori ma negativi.

SCALATURA

Lo Scaling ci permette di rimpicciolire e ingrandire il canvas e tutto quello che contiene.

ctx.scale(x, y);

Il valore di default per entrambi gli argomenti è 1. Questo vuol dire che se volessimo raddoppiare il canvas il valore da passargli sarà 2 e se lo volessimo dimezzare sarà di 0.5 e così via.

ctx.fillStyle = 'blue'
ctx.fillRect(100, 100, 100, 100)

ctx.save();

ctx.scale(2, 2);
ctx.fillStyle = 'red'
ctx.fillRect(100, 100, 100, 100)

ctx.restore();

ctx.save();

ctx.translate(150, 150);
ctx.scale(.5, .5);
ctx.translate(-150, -150);

ctx.fillStyle = 'yellow'
ctx.fillRect(100, 100, 100, 100)

ctx.restore();

Il primo quadrato blue è grande 100x100px, il secondo quello rosso ha le stesse dimensioni del primo ma è stato ingrandito del 200%, mentre il terzo, il giallo, è stato rimpicciolito del 50% e come con la funzione rotate abbiamo usato due translate per scegliere il punto di scalatura (si dirà cosi?).

CONCLUSIONE

In questo articolo vediamo come funzionano le trasformazioni, che potrebbero sembrare ostiche al primo impatto ma che sono abbastanza semplici una volta capito il loro funzionamento.

Ne manca ancora una di trasformazione, quella un po' piu complessa (almeno per me) e quindi gli dedicherò un articolo a parte.

Spero che l'articolo ti sia piaciuto Se hai dei consigli, suggerimenti o critiche costruttive lasciami un commento qui sotto oppure contattami trammite i miei social.

Canvas Javascript: Come disegnare immagini

Roberto — Fri, 22 Jan 2021 07:52:01 +0000

Ci sono molteplici situazioni per il quale potremmo volere un'immagine sul canvas ad esempio se stiamo creando un videogioco e dobbiamo caricare sia gli sfondi che gli sprite o se volessiomo manipolare delle foto o applicare degli effetti grafici animati.
Per questo e per molte altre ragioni in questo articolo tratteremo come caricare un immagine e impareremo ad usare il metodo che ci da a disposizione il context del canvas.

Come ogni progetto bisogna inizializzarlo e richiamare i vari tool che ci da il contesto 2d, per questo vi rimando a questo articolo che spiega come farlo.

*La funzione che abbiamo a disposizione per 'disegnare' un immagine sul canvas è *

ctx.drawImage(immagine, x, y)

Questa è la forma base, composta con gli argomenti obbligatori, più avanti spiegheremo anche gli altri, ma andiamo per gradi e inziamo a vedere quelli base.

immagine: è la variabile nella quale abbiamo salvato l'immagine che abbiamo precendentemente caricato. Ho dedicato il prossimo paragrafo al giusto caricamento della foto.
x, y : sono le cordinate che posizionano l'immagine sul canvas, partendo dal vertice superiore sinistro dell'immagine.

CARICARE UN IMMAGINE

Come abbiamo visto, dobbiamo passare una variabile con l'immagine alla funzione drawImage. Ma come si carica un immagine in javascript.

Il sistema più conosciuto è quella di creare nel DOM html, un elemento e mettere nell'attributo src il percorso del immagine e poi catturarlo con getDocumentById, ma per il canvas non è il più funzionale.

Il mio consiglio è quello di creare un oggetto Image direttamente nel codice javscript, così da essere più gestibile e tenere il DOM pulito con il solo elemento .

let immagine = new Image();
immagine.src = 'laMiaImmagine.jpg';

Abbiamo creato un nuovo oggetto Image() e lo abbiamo salvato nella variabile immagine. Avremmo avuto lo stesso risultato se avessimo usato il metodo document.createElement("img") al posto di new Image().
Nella seconda riga abbiamo attribuito alla proprietà src il percorso di dove si trova l'immagine che vogliamo caricare.

Ma sorge un problema, essendo javascript un linguaggio asincrono, se l'immagine ci mette tanto a caricare, magari perchè è troppo grande, la funzione drawImage riceverà come argomento una variabile non funzionante perchè l'immagine non ha fatto in tempo a caricare e sul canvas non si vedrebbe nulla.

Una soluzione efficente è usare il metodo addEventListener che aggiunge, nel nostro caso, l'evento load. Quest'ultimo, manda in eseguzione la funzione che gli passiamo solo quando l'immagine ha finito di essere caricata.

let immagine = new Image();
immagine.src = 'https://source.unsplash.com/U5rMrSI7Pn4/1920x1280';
immagine.addEventListener('load', () => {
  ctx.drawImage(immagine, 0, 0, 320, 240)
}, false);

Creiamo l'oggetto Image e gli carichiamo l'immagine.
Il metodo addEventListener applicato alla variabile immagine farà partire la funzione contente ctx.drawImage solo quando l'evento 'load', quindi solo quando l'immagine verrà caricata.
Così i problemi di asincronia saranno risolti.

ALTEZZA e LUNGHEZZA

Sicurmante vi sarete accorti che nell'ultimo codice drawImage aveva cinque argomenti e non tre.

ctx.drawImage(immagine, x, y, larghezza, altezza)

Abbiamo aggiunto l'altezza e la larghezza perchè l'immagine che abbiamo caricato era un 2400x1600 e se non avessimo adattato l'immagine al canvas, avremmo visto solo una porzione della foto.

Se il nostro scopo è adattare la foto con il canvas possiamo passargli direttamente le proprietà del canvas: width e height, come larghezza e altezza e la x e la y con valore 0.

ctx.drawImage(immagine, 0, 0, canvas.width, canvas.height)

RITAGLIARE (CROP)

Se volessimo ritagliare una porzione rettangolare dell'immagine caricata e disegnarla sul canvas, dovremmo usare anche gli ultimi argomenti che ci permettono di creare una maschera di ritaglio.

ctx.drawImage(immagine ,rX, rY, rLarghezza, rAltezza, x, y, larghezza, altezza)
immagine: l'oggetto Image()
rX, rY: le coordinata dell'immagine da dove partirà il ritaglio
rLarghezza, rAltezza: le dimensioni rettangolari del ritaglio
x, y: le coordinata di dove verrà posizionati il ritaglio sul canvas
larghezza, altezza: altezza e larghezza del ritaglio riferito al canvas

Facciamo un esempio pratico.
Dal immagine sottostante, voglio disegnare a video solo il funghetto di Super Mario.

Il punto di partenza del ritaglio sarà una coordinata relativa all'immagine (non al canvas) con la rX: 220px e la rY: 140px e per comprendere il funghetto dobbiamo creare un rettangolo lungo 140px e alto 110px.

Adesso che abbiamo la porzione ritagliata la posizioniamo sul canvas alle coordinate x: 50 e y:20.

Gli ultimi due valori sono le dimensioni con il quale vuoi fare vedere il tuo ritaglio. Se vuoi che le dimensioni rimangano invariate, rLarghezza deve essere uguale a larghezza e rAltezza devono essere uguali a altezza. Mentre se vogliamo che il ritaglio si raddoppi sul canvas i valori larghezza e Altezza devono essere il doppio dei valori di rLarghezza e rAltezza.
Nel nostro caso rimpiccioliamo il ritaglio dandogli una larghezza di 100 e un'altezza di 80 px.

let immagine = new Image();
immagine.src = 'https://source.unsplash.com/hQ4BQ3wdHsQ/600x400';
immagine.addEventListener('load', () => {
//ctx.drawImage(immagine ,rX, rY, rL, rA, x, y, l, a)
  ctx.drawImage(immagine, 220, 140, 140, 110, 50, 20, 100, 80 )
}, false);

CONCLUSIONE

In questo articolo abbiamo visto come caricare in maniera funzionale un immagine nel canvas e come possiamo creare una maschera di ritaglio con una sola funzione.
Quest'ultima è molto utile qualora volessimo fare degli slideshow o se volessimo dividere vari elementi caricando una solo immagine o (la mia preferita) creare degli sprites per i videogiochi.

Spero che l'articolo ti sia piaciuto Se hai dei consigli, suggerimenti o critiche costruttive lasciami un commento qui sotto oppure contattami trammite i miei social.

Photo by Geeky Shots on Unsplash
Photo by Matthew Henry on Unsplash

Canvas Javascript: Scrivere del testo

Roberto — Thu, 14 Jan 2021 16:59:33 +0000

Per scrivere del testo su canvas ci sono due funzioni che possiamo usare dopo aver inizializzato l'elemento canvas e dopo aver richiamato il context, e sono:

fillText(testo, x, y)
strokeText(testo, x, y)

Gli argomenti di queste due funzioni sono identici e sono: la stringa di testo da visualizzare e la pozione x, y di partenza. La differenza tra le due è che strokeText traccia il contorno delle lettere, mentre fillText le scrive 'piene'.

STILI

Un metodo molto famigliare per chi usa il css e il metodo font che è uguale al suo corrispettivo per css.
Come nel css questo metodo può cambiare la dimensione, il tipo di font e lo spessore (esempio 'bold'), l'unica differenza è che tutti valori bisogna passarli come stringa.

ctx.font = 'valore';

Questo e gli altri metodi vanno messi prima delle funzioni che scrivono a video (fillText e strokeText)

ctx.font = 'bold 42px sans-serif';
ctx.fillText('Questo testo sarà grande 42px e in grassetto', 50, 30)

Un'altra altra formattazione del testo comune è l'allineamento, che può essere a destra, sinistra o al centro.

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

Come si vede, ci sono altre due opzione utilizzabili oltre a quelle classiche: start che è l'opzione di default e allinea il testo all'inizio della linea, mentre end con la fine della linea;

ctx.font = '18px ';
ctx.textAlign = 'left';
ctx.strokeText('Text left', 150, 100);
ctx.textAlign = 'center';
ctx.strokeText('Text center stroke', 150, 200);
ctx.textAlign = 'end';
ctx.fillText('text start to end', 150, 300);

Per colorare il testo ci sono due funzioni colorfill e colorStoke il primo colora il volume della scritta e si usa prima di fillText, mentre il secondo colora il bordo e si usa prima di strokeText.
Queste funzioni sono quelle usate per colore anche le linee e le forme geometrico, quindi se volete approfondire vi rimando all'articolo Canvas Javascript: Come aggiungere lo stile alle figure geometriche, dove ho dedicato un paragrafo ai colori.

CONCLUSIONE

In questo articolo abbiamo imparato a rederizzare le scritte sul canvas.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.