HTML - Velocity Draw

Introduzione a Velocity Draw

Ciao, futuri sviluppatori web! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di HTML e in uno strumento piccolo ma potente chiamato Velocity Draw. Come il tuo amico di quartiere insegnante di computer, sono qui per guidarti in questa avventura, passo dopo passo. Non preoccuparti se non hai mai scritto una riga di codice prima - stiamo iniziando da zero!

Cos'è Velocity Draw?

Velocity Draw è un'applicazione di disegno semplice ma potente basata su HTML5 canvas. Permette agli utenti di creare disegni spostando il mouse o le dita (sui dispositivi touch) lungo lo schermo. La parte cool? Più veloce si muove, più sottile diventa la linea!

Configurazione del Nostro File HTML

Iniziamo creando una struttura HTML di base per la nostra applicazione Velocity Draw. Apri il tuo editor di testo preferito e digita il seguente codice:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
// Metteremo il nostro codice JavaScript qui
</script>
</body>
</html>

Questo imposta un documento HTML di base con un elemento canvas dove faremo i nostri disegni, e un tag script dove scriveremo il nostro codice JavaScript.

Magia JavaScript: Rendere il Canvas Interattivo

Ora, aggiungiamo un po' di JavaScript per rendere il nostro canvas interattivo. Lo breakdown in piccoli, pezzi digeribili:

1. Configurazione del canvas

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Qui, stiamo prendendo il nostro elemento canvas, ottenendo il suo contesto di rendering 2D (che useremo per disegnare), e impostando la sua dimensione per riempire toda la finestra.

2. Monitoraggio del movimento del mouse

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

Configuriamo alcune variabili per monitorare se stiamo disegnando, la posizione finale del mouse e la velocità corrente. Poi aggiungiamo i listener per le azioni del mouse.

3. Implementazione delle funzioni di disegno

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

function draw(e) {
if (!isDrawing) return;

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}

Queste funzioni gestiscono il disegno vero e proprio. La funzione draw è dove avviene la magia - calcola la velocità in base a quanto è stato spostato il mouse e aggiusta lo spessore della linea di conseguenza.

Mettere Tutto Insieme

Ora che abbiamo tutti i pezzi, combiniamoli nel nostro file HTML:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

function draw(e) {
if (!isDrawing) return;

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}
</script>
</body>
</html>

Come Funziona

Quando premi il pulsante del mouse, startDrawing viene chiamato, che imposta isDrawing su true e注册 la posizione di partenza.
Mentre muovi il mouse, draw viene chiamato ripetutamente. Disegna una linea dalla posizione finale alla posizione corrente.
La velocità viene calcolata in base a quanto il mouse si è mosso dall'ultima chiamata.
Lo spessore della linea è inversamente proporzionale alla velocità - movimenti più rapidi risultano in linee più sottili.
Quando rilasci il pulsante del mouse o lo sposti fuori dal canvas, stopDrawing viene chiamato, fermando il processo di disegno.

Conclusione

Congratulations! Hai appena creato la tua applicazione Velocity Draw. Non è incredibile come poche righe di codice possano creare qualcosa di così interattivo e divertente? Mentre giochi con il tuo nuovo strumento di disegno, pensa a come potresti estenderlo. Potresti aggiungere opzioni di colore? E diverse modalità di pennello?

Ricorda, la chiave per diventare un grande programmatore è l'esperimentazione e la pratica. Quindi non fermarti qui - continua a esplorare, a codificare e, soprattutto, a divertirti!

Metodo	Descrizione
`getElementById`	Recupera un elemento dal DOM per il suo ID
`getContext`	Ottiene il contesto di rendering per il canvas
`addEventListener`	Aggiunge un gestore di eventi a un elemento
`beginPath`	Inizia un nuovo percorso nel canvas
`moveTo`	Sposta il cursore di disegno a un punto specificato
`lineTo`	Disegna una linea dal punto corrente a un punto specificato
`stroke`	Renderizza il percorso definito con lo stile di tracciato corrente
`Math.sqrt`	Calcola la radice quadrata di un numero
`Math.pow`	Eleva un numero a una potenza specificata
`Math.max`	Restituisce il più grande di zero o più numeri

Buon codice, futuri maghi del web!

Credits: Image by storyset

Tutorial precedente:

HTML - Desk per presentazioni Web

Prossimo tutorial:

HTML - Codice QR