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
Triggerare una pipeline su un altro repository di Azure DevOps
Creare agenti facilmente con Azure AI Agent Service
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Aggiornare a .NET 9 su Azure App Service
Utilizzare la funzione EF.Parameter per forzare la parametrizzazione di una costante con Entity Framework
Fissare una versione dell'agent nelle pipeline di Azure DevOps
Ottenere un token di accesso per una GitHub App
Selettore CSS :has() e i suoi casi d'uso avanzati
Utilizzare Hybrid Cache in .NET 9
Gestire progetti NPM in .NET Aspire
Recuperare l'ultima versione di una release di GitHub
Controllare la telemetria con .NET Aspire
I più letti di oggi
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi