Grafikprogrammierung unter JavaScript

Willemers Informatik-Ecke

Das einzig seriöse Javabuch :-) Mehr...

Errata
Bei Amazon bestellen

2015-05-15
JavaScript kann in einem mit dem Tag CANVAS bezeichneten Feld Grafiken programmieren. Dazu muss im Body-Bereich zunächst ein Canvas definiert werden. Diesem wird eine ID zugeordnet, über die JavaScript das Canvas mit der Methode getElementById() ansprechen kann. Darüber holt sich JavaScript über die Methode getContext() den Grafikkontext. Über diesen können die Grafikprimitive aufgerufen werden, so wie hier fillRect() zum Zeichnen eines gefüllten Rechtecks.
<html>
<head>
<script language=javascript>
function malWas() {
   var canvas = document.getElementById("myCanvas");
   if (canvas && canvas.getContext) {
      var ctx = canvas.getContext("2d");
      if (ctx) {
         ctx.fillStyle = "#9FC0D0";
         ctx.fillRect(10,20,50,50);
      }
   }
}
</script>
</head>
<body onload="malWas()">
<canvas id="myCanvas" width="300" height="200">
</body>
</html>
JavaScript verfügt über einige Grafikprimitive:

fillRect(x, y, breite, hoehe)"; Gefülltes Rechteck
strokeRect(x, y, breite, hoehe)"; Rechtecklinie
arc(x, y, radius, anfangswinkel, endwinkel, richtung); Kreisausschnitt
fillText(string, x, y); Texte

Für die Darstellung können Farben und Stile durch folgende Methoden verändert werden:

fillStyle = "rgb(20, 255, 0)"; gibt die Farbe der Füllung an.
strokeStyle = "#11FF00"; gibt die Linienfarbe an.
lineWidth = 3; bestimmt die Stärke der Linie

Links:


Homepage (C) Copyright 2015 Arnold Willemer