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
Eseguire attività con Azure Container Jobs
Hosting di componenti WebAssembly in un'applicazione Blazor static
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Utilizzare Tailwind CSS all'interno di React: installazione
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Paginare i risultati con QuickGrid in Blazor
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Creare moduli CSS in React
Utilizzare Tailwind CSS all'interno di React: primi componenti