10.1 Nozioni di base su Canvas
Canvas API offre agli sviluppatori ottimi strumenti per creare grafica 2D e animazioni nelle applicazioni web. In questa lezione vedremo le basi su come lavorare con Canvas API, inclusa la creazione di elementi, la grafica di disegno e la creazione di animazioni.
Creazione di un elemento <canvas>
L'elemento <canvas> in HTML è usato per creare un'area di disegno, dove si possono eseguire
varie operazioni grafiche:
<canvas id="myCanvas" width="800" height="600"></canvas>
Ottenere il contesto di disegno
Per eseguire operazioni di disegno su un elemento <canvas> è necessario ottenere il contesto di disegno.
Per la grafica 2D si usa il contesto 2d:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
10.2 Disegnare su Canvas
1. Rettangoli
Canvas API offre metodi per disegnare rettangoli riempiti e rettangoli con bordi.
Rettangolo riempito — fillRect:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Rettangolo con bordi — strokeRect:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
</script>
</body>
</html>
Pulire l'area
Il metodo clearRect è usato per pulire una determinata area:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
ctx.clearRect(0, 0, 800, 600);
</script>
</body>
</html>
2. Linee
Per disegnare linee si usa il metodo beginPath per iniziare un nuovo percorso e i metodi moveTo e
lineTo per definire le coordinate delle linee:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
3. Cerchi e archi
Il metodo arc è usato per disegnare cerchi e archi:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(400, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
4. Testo
I metodi fillText e strokeText sono usati per disegnare il testo:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 350);
</script>
</body>
</html>
5. Gradienti
Canvas API supporta la creazione di gradienti lineari e radiali.
Gradiente lineare:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</script>
</body>
</html>
Gradiente radiale:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const radialGradient = ctx.createRadialGradient(400, 200, 20, 400, 200, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'green');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 100, 200, 200);
</script>
</body>
</html>
6. Immagini
Il metodo drawImage è usato per disegnare immagini su Canvas:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg';
</script>
</body>
</html>
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'path/to/image-1.jpg';
</script>
</body>
</html>
10.3 Animazioni su Canvas
Per creare animazioni si usa il metodo requestAnimationFrame, che chiama la funzione specificata
per disegnare il nuovo frame dell'animazione.
1. Nozioni di base sull'animazione
Esempio di una semplice animazione:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
2. Animazioni complesse
Esempio di animazione di un cerchio:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animateCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
ctx.arc(centerX + Math.cos(angle) * 100, centerY + Math.sin(angle) * 100, radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
angle += 0.05;
requestAnimationFrame(animateCircle);
}
animateCircle();
</script>
</body>
</html>
3. Uso dei timer
Per creare animazioni si possono anche usare i metodi setInterval e setTimeout.
Esempio di animazione usando setInterval:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
}
setInterval(draw, 30);
</script>
</body>
</html>
GO TO FULL VERSION