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
Le novità di Angular 13 e del suo ecosistema
Creare un'istanza di Azure SQL Database tramite ARM
Impostare l'hostname di un'immagine docker per rendere il container da altri container in Visual Studio
Gestire errori temporanei in una comunicazione gRPC con ASP.NET Core 6
GitHub e .NET 6
Creare classi CSS custom per Bootstrap 5
Tracciare gli eventi tramite i DevTools di Chrome
Utilizzare il metodo reduce in JavaScript
Gestire il timing sugli eventi all'interno di un'applicazione Blazor
Configurare EF Core 6 con le minimal API di ASP.NET
Utilizzare SFTP con Azure Storage Blob
I più letti di oggi
- Monitorare contemporaneamente i cambiamenti di più proprietà dello scope di AngularJS
- "welcome to the modern web development" con @dbochicchio e @kasuken, ora live per iniziare #PWAConfIT parleremo di #PWA e di come costruire applicazioni web moderne per tutto il pomeriggio. Seguiteci live su https://aspit.co/PWAConf-20 #aspilive
- Sfruttare le dipendenze con il model binding di ASP.NET Web Forms
- rilasciato #vs2017.5, con importanti aggiornamenti sulla velocità di caricamento dei progetti, supporto a C# 7.2 e nuove feature di Xamarin.disponibile inoltre anche #VS for #Mac, con sign integrato delle app iOS.altre informazioni su https://aspit.co/bkk
- Disabilitare un pulsante in Blazor durante il salvataggio