Grafiken erstellen

Dieser Quellcode verwendet das canvas-Element, um eine Zeichenfläche (engl. canvas) auf den Bildschirm zu bringen. Mit der Canvas-Methode getContext erzeugst du einen Zeichenkontext, mit dem du Rechtecke auf das Canvas setzen kannst. Verwende <input>-Tags und das Attribut onclick, um die Funktionen zeichne und lösche aufzurufen. Wenn die Datei im Browser geöffnet ist, kannst du durch einen Klick auf die Schaltfläche „Zeichne’“ ein Rechteck erscheinen lassen. Klickst du auf „Lösche“, verschwindet das Rechteck wieder.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Snake</title>
   </head>
   <body>
      <canvas id="canvas" width="300" height="300"></canvas> <br/>
      <input type="button" onclick="zeichne()" value="Zeichne"/><br/>
      <input type="button" onclick="lösche()" value="Lösche"/> <br/>
      <script>
         var canvas = document.getElementById("canvas");
         var ctx = canvas.getContext("2d");
         function zeichne() {
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, 30, 30); 
         }
         function lösche() { 
             ctx.clearRect(0, 0, 300, 300);
          }
      </script>
   </body>
</html>

Beispiel ansehen

Zurück zur Mission