Esercizi Canvas JavaScript
Codegrind Team•Jul 12 2024
Ecco degli esercizi con soluzione per praticare l’uso del canvas in JavaScript.
Esercizio 1: Disegnare un Rettangolo
Disegnare un rettangolo utilizzando il canvas.
<!DOCTYPE html>
<html>
<head>
<title>Disegnare un Rettangolo</title>
</head>
<body>
<canvas
id="mioCanvas"
width="400"
height="400"
style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("mioCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 150, 100);
</script>
</body>
</html>
Esercizio 2: Disegnare un Cerchio
Disegnare un cerchio utilizzando il canvas.
<!DOCTYPE html>
<html>
<head>
<title>Disegnare un Cerchio</title>
</head>
<body>
<canvas
id="mioCanvas"
width="400"
height="400"
style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("mioCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
Esercizio 3: Disegnare una Linea
Disegnare una linea utilizzando il canvas.
<!DOCTYPE html>
<html>
<head>
<title>Disegnare una Linea</title>
</head>
<body>
<canvas
id="mioCanvas"
width="400"
height="400"
style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("mioCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(400, 400);
ctx.stroke();
</script>
</body>
</html>
Esercizio 4: Disegnare un Testo
Disegnare un testo utilizzando il canvas.
<!DOCTYPE html>
<html>
<head>
<title>Disegnare un Testo</title>
</head>
<body>
<canvas
id="mioCanvas"
width="400"
height="400"
style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("mioCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 50, 50);
</script>
</body>
</html>
Esercizio 5: Disegnare un Triangolo
Disegnare un triangolo utilizzando il canvas.
<!DOCTYPE html>
<html>
<head>
<title>Disegnare un Triangolo</title>
</head>
<body>
<canvas
id="mioCanvas"
width="400"
height="400"
style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("mioCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(150, 150);
ctx.lineTo(250, 150);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
Esercizio 6: Disegnare un Rettangolo con Bordo
Disegnare un rettangolo con un bordo utilizzando il canvas.
<!DOCTYPE html>
<html>
<head>
<title>Disegnare un Rettangolo con Bordo</title>
</head>
<body>
<canvas
id="mioCanvas"
width="400"
height="400"
style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("mioCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(100, 100, 200, 150);
ctx.strokeStyle = "#0000FF";
ctx.lineWidth = 5;
ctx.strokeRect(100, 100, 200, 150);
</script>
</body>
</html>
Esercizio 7: Disegnare un Gradiente
Disegnare un rettangolo con un gradiente lineare utilizzando il canvas.
<!DOCTYPE html>
<html>
<head>
<title>Disegnare un Gradiente</title>
</head>
<body>
<canvas
id="mioCanvas"
width="400"
height="400"
style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("mioCanvas");
var ctx = canvas.getContext("2d");
var gradiente = ctx.createLinearGradient(0, 0, 400, 0);
gradiente.addColorStop(0, "red");
gradiente.addColorStop(1, "yellow");
ctx.fillStyle = gradiente;
ctx.fillRect(50, 50, 300, 300);
</script>
</body>
</html>