⬆

Canvas

siehe auch Developer.Mozilla
Siehe auch HTML living Standard the canvas element
Siehe auch w3schools_canvas
Siehe auch w3schools canvas Referenz
siehe auch ZIMJS

Ein canvas Element ist ein Rechteck, in dem man Grafiken darstellen kann, also eine Art Zeichenbrett. Eigentlich ist es mehr als nur eine Leinwand, denn hier lassen sich mittels Javascript Animationen und interaktive Anwendungen bis hin zu kleinen Spielen erzeugen. Canvas springt in die Lücke, die Flash hinterlassen hat.

Das Prgramm AnimateCC (Nachfolger von Flash) bietet die Möglichkeit etwas in HTML / Canvas zu erstellen. Siehe auch das Framework ZIMJS , mit vielen spielerischen Beispielen und Tutorials, um einen Eindruck zu bekommen, was hier alles möglich ist.

<canvas width="300" height="225"></canvas>

Das canvas Element selbst ist unsichtbar. Es folgt ein canvas Element mit Rahmen in CSS.

<canvas width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Man kann mehrere canvas Elemente auf einer Seite erzeugen. Um diese anzusprechen kann man ihnen eine id verpassen.

<canvas id="a" width="300" height="225"></canvas>

Auf diese Weise kann man es im DOM finden.

var a_canvas = document.getElementById("a");

Auf folgende Weise kann man mittels Javascript etwas zeichnen.

<script>
function draw_a() {
var a_canvas = document.getElementById("a");
var a_context = a_canvas.getContext("2d");
a_context.fillRect(50, 25, 150, 100); }
</script>

so sieht's aus

Erzeuge ein drawing- context- Objekt mit der Methode getContext darin die Parameterwertzuweisgung "2d". Weitere getContext Parameter findet man hier.

drawing context

Hier einige Methoden von drawing context (mehr dazu siehe unten):

fillStyle   CSS Farbe, Muster, Farbverlauf
fillRect(x, y, widht, height)   Rechteck, linke obere Ecke, Weite Höhe

strokeStyle

 color CSS, Farbe
gradient Farbverlaufs Objekt
pattern Muster Objekt
strokeRect(x,y,widht, height)   Rechteck ohne Füllfarbe nur Rand im aktullen strokeStyle
clearRect(x,y,width, height)   löscht die Pixel in dem Rechteck

Reset canvas

Durch das erneute Setzen der width eines canvas Elements wird der komplette Inhalt gelöscht. Es kann sich dabei um die gleiche Breite handeln.

a_canvas.width = a_canvas.width;

Linien zeichnen, Path

Man kann gerade Linien zeichen mit folgenden beiden Methoden.

moveTo(x, y) definiert den Startpunkt der Linie.

lineTo(x, y) zieht eine Linie zum Punkt.

Man sieht die Linie jedoch erst, wenn man eine der ink- Methoden aufruft.

context.strokeStyle = "#eee"; context.stroke();

Beispiel canvas

Ihr Browser unterstützt kein Html 5

Es folgt der Quellcode für dieses Canvas Elementes: 

        <script>
        var a_canvas = document.getElementById( "myCanvas0" );
        var context = a_canvas.getContext( "2d" );
        context.beginPath();
        context.moveTo( 10, 150 );
        context.lineTo( 10, 300 );
        context.lineTo( 200, 300 );
        context.lineTo( 200, 150 );
        context.lineTo( 100, 10 );
        context.lineTo( 10, 150 );
        context.strokeStyle = "#000000";
        context.stroke();
        </script>

 

Im Body an der Stelle, wo das canvas Element erscheinen soll, wird es erzeugt:

<canvas width="300" height="200" id="a">Ihr Browser unterstützt kein Html 5, oder Javascript.</canvas>

Es folgen einige Beispiele und Methoden

Es wird ein Canvas Element mit id erzeugt.

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Mittels Javascript werden Methoden aufgerufen.

Javascript Info

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
ctx.stroke();
</script>

Rechteck zeichnen

  • ctx.fillStyle="#FF0000";
  • ctx.fillRect(0,0,150,75);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Pfad, Linien zeichnen

  • moveTo(x,y) defines the starting point of the line
  • lineTo(x,y) defines the ending point of the line
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Kreis

  • arc(x,y,r,start,stop)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Canvas Text

  • font - defines the font properties for text
  • fillText(text,x,y) - Draws "filled" text on the canvas
  • strokeText(text,x,y) - Draws text on the canvas (no fill)
 
var cnvText2 = document.getElementById( "cnvTxt2" );
var ctxTxt2 = cnvTxt2.getContext( "2d" );
ctxTxt2.font = "50px Arial";
ctxTxt2.strokeText( "Hello World", 10, 50 );

Text ohne Füllung

strokeText()

siehe Mozilla
  • createLinearGradient(x,y,x1,y1)
  • createRadialGradient(x,y,r,x1,y1,r1)

Farbverlauf

Es gibt mehrere Arten von Farberläufen

Sieh dazu Developer.Mozilla

 
  var cnvG = document.getElementById( "cnvGradient" );
  var ctxG = cnvG.getContext( "2d" );
  const gradient = ctxTxt2.createLinearGradient(20,0,220,0);
  // Drei Color-Stops werden gesetzt
  gradient.addColorStop( 0, "green" );
  gradient.addColorStop( 0.5, "cyan" );
  gradient.addColorStop( 1, "green" );
  // Ein fillStyle und ein Rechteck wird gesetzt
  ctxG.fillStyle = gradient;
  ctxG.fillRect( 20, 20, 200, 100);

Linear Gradient

Bei einem Linearem Verlauf gibt man 2 Positionen über x-y Koordinaten an. Wenn man sich zwischen diesen beiden Punkten eine Linie vorstellt, so bestimmt diese Linie Anfang und Ende des Verlaufs sowie die Richtung.

ctx.createLinearGradient(0,0,200,0)

Außerdem muss man ein oder mehrere ColorStops definieren. Die Positionen der Colorstops liegen zwischen 0 und 1. Ein Colorstop auf 0.5 liegt also genau in der Mitte der Linie, die den Verlauf bestimmt. siehe w3schools
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(100,50,0,100,50,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,100);

Radial Gradient

Der radiale, kreisförmige Verlauf besteht aus 2 definierten Kreisen. Somit ist es möglich, eliptische, flammenartige Verläufe zu definieren.
Am besten man probiert es an einem Rechteck aus, welches genauso groß ist, wie das Canvas- Element und in der rechten oberen Ecke liegt.

Am Anfang ist es auch hilfreich, wenn beide Kreise die gleichen Koordinaten haben. So versteht man die beiden Radius Werte besser. Probiere das Beispiel links bei einer Canvas Größe von 200 x 100.

Versuch macht klug bei w3schools

createRadialGradient() hat 6 Parameter, die im folgenden aufgeführt werden.

x
x Position des Mittelpunktes des ersten Kreises
y
y Position des Mittelpunktes des ersten Kreises
radius Start
Radius Kreis eins. Wenn der Radius den Wert 0 hat, beginnt er genau auf der zuvor definierten x-y Koordinate. Hat er einen höhren Wert beginnt der Radius etwas versetzt vom Mittelpunkt. Nehmen wir an der Wert wäre 5. Dann würde der eigentliche Verlauf ab 5 Pixel beginnen, alles was zwischen 0 und 5 liegt, wird mit der zuerst definierten Farbe gefüllt. Man definiert dann den Verlauf in einem Außenringbereich.
x
x Position des Mittelpunktes des zweiten Kreises
y
y Position des Mittelpunktes des zweiten Kreises
radius Ende
Radius Ende oder Breite des Verlaufs. Zwischen Radius Start und Radius Ende wird die Breite des Verlaufs bestimmt. Ist Radius Ende kleiner als Radius Start, verläuft der Verlauf in der Gegenrichtung, sofern die Mittelpunkte beider Kreise gleich sind. Bei versetzten Mittelpunkten kann bei einem zu kleinem Ende Wert der Kreis wie ein Tortenstück aussehen.

 

 

ctx.drawImage(img,10,10);


Draw Image

  • drawImage(image,x,y);

x ist der horzintale Abstand des Bildes von der linken Seite des canvas
y ist der vertikale Abstand des Bildes von der Oberkante des canvas

Man kann das Bild erst dann ansprechen, wenn es geladen ist. Daher werden  Methoden wie drawImage() oder fill() erst in der Funktion eingefügt, die mit dem EventHandler onLoad() aufgerufen wird.

 
var c = document.getElementById( "myCanvas" );
var ctx = c.getContext( "2d" );
var img = new Image();
img.src = 'canvas/birds1.jpg';

img.onload = function ()
{
var pat = ctx.createPattern( img, "repeat" );
ctx.rect( 0, 0, 200, 200 );
ctx.fillStyle = pat;
ctx.fill();
};
Sie brauchen einen neuen Browser
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("bird");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
img.onload = function() {
ctx.fill();
};

 

fillStyle pattern
var img=document.getElementById("bird"); Wenn man ein Image Objekt erzeugt, indem man auf die id eines Bildes zugreift, sollte auch dann sichergestellt werden, dass das Bild geladen ist.