Il canvas è uno dei tag più interessanti che HTML5 mette a disposizione, ma anche uno dei più complessi da gestire, perché il disegno avviene attraverso chiamate JavaScript.
Nello script di oggi vedremo come animare un'immagine dentro un canvas, per applicare effetti tipo quelli legati al loading. Nel caso specifico, date un'immagine (quadrata), procedere a farla ruotare, in modo che l'utente, mentre effettuiamo una chiamata ad una risorsa AJAX, ad esempio, abbia la percezione che la nostra pagina sta caricando dei dati.
Per prima cosa, procediamo ad aggiungere il markup necessario a disegnare un'immagine ed il canvas:
<img id="staticImage" src="loading.png" /> <canvas width="24" height="24" id="loadingCanvas" style="display:none;"></canvas>
Nel nostro esempio, prenderemo il tag img, che punta ad un'immagine statica (una PNG, così da poter gestire le trasparenze) e lo useremo come base, per disegnare dentro il canvas. Il flusso delle operazione che faremo è:
- nascondere il tag img;
- mostrare il tag canvas;
- ripulire il canvas e caricare l'immagine;
- ruotare l'immagine e disegnarla nel canvas;
Ecco il codice:
<script type="text/javascript"><!-- var timer; var rotation = 0; var img = new Image(); // faccio partire l'animazione $(function(){ timer = setInterval(animateCanvas, 10); }); function animateCanvas(){ // nascondo l'immagine e mostro il canvas $('#staticImage').hide(); $('#loadingCanvas').show(); img.src = 'loading.png'; // imposto la dimensione e carico il canvas var d = 24; var ctx = $('#loadingCanvas').getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; ctx.save(); // applico la rotazione, pulendo la superficie.. ctx.clearRect(0,0,d,d); ctx.translate(d/2,d/2); rotation++; // ...routando l'immagine... ctx.rotate(rotation*Math.PI/(d*2)); ctx.translate(-(d/2),-(d/2)); // e disegnandola sul canvas ctx.drawImage(img,0,0); ctx.restore(); } //--></script>
L'operazione è effettuata ad intervalli regolari (ogni 10 msec), così da essere fluida. Lo script fa uso di jQuery, per semplificare la parte di accesso al DOM e consentirci di soffermarci maggiormente sugli aspetti legati al canvas in sè. Potete, comunque, farne a meno, riscrivendo alcune delle chiamate presenti nello script.
L'animazione, infine, parte all'avvio della pagina, ma è sufficiente richiamare questo codice in seguito ad un particolare evento (ad esempio, il click su un pulsante), per applicarlo alle proprie necessità.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Come migrare da una form non tipizzata a una form tipizzata in Angular
Load test di ASP.NET Core con k6
Generare file per il download da Blazor WebAssembly
Eseguire operazioni con timeout in React
Effettuare delete massive con Entity Framework Core 7
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Creare alias per tipi generici e tuple in C#
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Utilizzare database e servizi con gli add-on di Container App