Esercizi Canvas JavaScript

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>