Introduzione
In questo tutorial, impareremo a creare un disegno interattivo utilizzando l´elemento <canvas> di HTML5. Il nostro obiettivo sarà quello di permettere all´utente di disegnare liberamente sulla tela con il mouse, cambiando colore e dimensione del pennello. Questo esempio non solo dimostra le potenzialità del canvas, ma offre anche un´interazione coinvolgente per l´utente.
Codice completo
<canvas id="drawingCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>
<div>
<label for="colorPicker">Scegli un colore:</label>
<input type="color" id="colorPicker" value="#000000">
<label for="brushSize">Dimensione pennello:</label>
<input type="range" id="brushSize" min="1" max="50" value="5">
<button id="clearCanvas">Pulisci</button>
</div>
<script>
const canvas = document.getElementById(´drawingCanvas´);
const ctx = canvas.getContext(´2d´);
let drawing = false;
let color = document.getElementById(´colorPicker´).value;
let brushSize = document.getElementById(´brushSize´).value;
// Inizio disegno
canvas.addEventListener(´mousedown´, (e) => {
drawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});
// Disegno in corso
canvas.addEventListener(´mousemove´, (e) => {
if (drawing) {
ctx.strokeStyle = color;
ctx.lineWidth = brushSize;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
});
// Fine disegno
canvas.addEventListener(´mouseup´, () => {
drawing = false;
ctx.closePath();
});
// Cambia colore
document.getElementById(´colorPicker´).addEventListener(´input´, (e) => {
color = e.target.value;
});
// Cambia dimensione pennello
document.getElementById(´brushSize´).addEventListener(´input´, (e) => {
brushSize = e.target.value;
});
// Pulisci canvas
document.getElementById(´clearCanvas´).addEventListener(´click´, () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
</script>
Spiegazione
Il codice sopra crea una semplice applicazione di disegno. Ecco un´analisi dettagliata delle sue parti principali:
- <canvas>: Questo è l´elemento HTML dove avverrà il disegno. Abbiamo impostato una larghezza di 800 pixel e un´altezza di 600 pixel, con un bordo visibile per delimitare l´area di disegno.
- Input per il colore: Utilizziamo un input di tipo
colorper permettere all´utente di scegliere il colore del pennello. - Input per la dimensione del pennello: Un input di tipo
rangeconsente di selezionare la dimensione del pennello, con un valore minimo di 1 e massimo di 50. - Pulsante di pulizia: Questo pulsante permette di cancellare il contenuto del canvas.
La logica di disegno è gestita tramite eventi del mouse:
- mousedown: Iniziamo a disegnare quando l´utente preme il pulsante del mouse.
- mousemove: Continuiamo a disegnare mentre il mouse si muove, tracciando linee sul canvas.
- mouseup: Terminiamo il disegno quando l´utente rilascia il pulsante del mouse.
Best practice
Quando si lavora con il canvas in HTML5, ci sono alcune best practice da seguire:
- Gestione della memoria: Assicurati di liberare le risorse quando non sono più necessarie, specialmente in applicazioni più complesse.
- Ottimizzazione delle prestazioni: Riduci il numero di operazioni di disegno complesse, specialmente in loop di animazione.
- Compatibilità: Testa il tuo codice su diversi browser per garantire un´esperienza utente uniforme.
- Accessibilità: Considera l´accessibilità, fornendo alternative per gli utenti che non possono utilizzare il mouse.
Riepilogo
In questo tutorial, abbiamo creato un´applicazione di disegno interattivo utilizzando HTML5 Canvas. Abbiamo esplorato come gestire gli eventi del mouse per disegnare sulla tela, cambiare il colore e la dimensione del pennello, e pulire il canvas. Questo esempio è un ottimo punto di partenza per esplorare ulteriori funzionalità grafiche e interattive.