Grafiken erstellen

Code skill

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>

Zurück zur Mission
Copyright © 2008 Walker Books Ltd
Illustrations © Duncan Beedie
All rights reserved.