Plattformunabhängig Grafik und 3-D programmieren mit HTML 5

Malkasten

In den Canvas zeichnet Javascript in Echtzeit Linien, Ellipsen und Rechtecke sowie die aus Zeichenprogrammen bekannten Bézierkurven. Eine Ausfüllen-Funktion verpasst den Elementen eine Füllung, auch Farbverläufe und Schatteneffekte sind möglich. Der ganze Canvas lässt sich drehen, zoomen und verschieben.

Ein Canvas-Element besteht lediglich aus dem »canvas« -Tag. Seine Methode »getContext()« gibt in Javascript ein Objekt zurück, das die Zeichenbefehle als Methoden enthält:

var canvas = document.getElementById("Canvas-Element");
var ctx = canvas.getContext('2d');

Der 2-D-Kontext ist leicht zu meistern. Das in diesem Code erzeugte Canvas-»2d« -Objekt stellt Befehle für Zeichenmethoden zur Verfügung. Verständlich dokumentiert sind sie unter [8], der entsprechende W3C-Standard ist unter [9] zu finden.

Listing 1 enthält ein einfaches Beispiel für die wichtigsten Canvas-Methoden (Abbildung 2). Die Zeilen 6 und 7 laden eine Bilddatei in ein Javascript-Objekt. Da der weitere Code erst ablaufen darf, wenn das Bild vom Server geladen ist, hängt er vom »onload« -Event des HTML-Dokuments ab.

Listing 1

Canvas-2-D-Beispiel

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03   <head>
04     <script type="text/javascript">
05       //Image-Objekt
06       var rose = new Image();
07       rose.src="rose.png";
08       //erst ausführen, wenn das Bild geladen ist
09       window.onload = function(){
10         //Canvas-Kontext
11         var canvas  = document.getElementById("mycanvas");
12         var ctx = canvas.getContext('2d');
13
14         //Füllung, Umriss
15         ctx.fillStyle = "rgba(0,255,50,0.5)";
16         ctx.strokeStyle = "rgba(150,75,0,1)";
17
18         //Schatten
19         ctx.shadowOffsetX = 2;
20         ctx.shadowOffsetY = 3;
21         ctx.shadowBlur = 5;
22         ctx.shadowColor = "#888888"
23
24         //Rechteck
25         ctx.fillRect(50,50,125,125);
26         ctx.strokeRect(50,50,125,125);
27
28         //Pfad-Objekt zeichnen
29         ctx.beginPath();
30         ctx.moveTo(25, 25);
31         ctx.lineTo(105, 25);
32         ctx.arc(125, 25, 20, -Math.PI, 0, false)
33         ctx.lineTo(145, 125);
34         ctx.bezierCurveTo(80, 145, 105, 105, 25, 125)
35         ctx.closePath();
36
37         //Pfad-Objekt füllen
38         ctx.fillStyle = "rgba(255,255,50,0.5)";
39         ctx.fill();
40         ctx.stroke();
41
42         //Bitmap
43         ctx.fillStyle = "rgba(0, 0, 0, 1)";
44         ctx.drawImage(rose, 55, 55, 50, 50);
45       }
46     </script>
47   </head>
48   <body>
49     <canvas id="mycanvas" width="200" height="200"></canvas>
50   </body>
51 </html>

Pfade und Linien

Die Zeilen 11 bis 12 initialisieren einen 2-D-Canvas-Kontext, Zeilen 14 bis 15 setzen Füllung und Umriss für künftige Zeichenoperationen, 19 bis 22 Schatten-Offset, Unschärfe und Farbe. Die ersten Zeichenbefehle folgen in den Zeilen 25 und 26: ein gefülltes Rechteck und ein passender Umriss in derselben Größe. Die Zeilen 29 bis 35 zeichnen einen Pfad aus geraden Linien, einem Kreisbogen und einer Bézierkurve. Die ersten zwei Zeilen eröffnen den Pfad und setzen den Startpunkt. Dann folgen eine gerade Linie, ein Halbkreisbogen und eine weitere gerade Linie. Zu beachten ist, dass die »arc()« -Methode Start- und Endwinkel (vierter und fünfter Parameter) nicht als Winkel, sondern als Radiant interpretiert.

Die Bézierkurve bildet die Unterseite des ockerfarbenen Kastens. Die ersten vier Parameter beschreiben die x- und y-Koordinaten der so genannten Kontrollpunkte, die wie in einem Zeichenprogramm Krümmungsrichtung und -tiefe festlegen (Abbildung 3).

Abbildung 3: Krümmung nach Maß: Die beiden Kontrollpunkte einer Bézierkurve (rot markiert) tauchen in der Canvas-Funktion bezierCurveTo() ebenfalls als Parameter auf.