Schatten erstellen

Für einen Schatten benötigen wir 4 Eigenschaften des Kontext-Objekts:

MemberBeschreibung
shadowColorGibt die Farbe des Schattens an.
shadowOffsetXGibt den Versatz in horizontaler Richtung an.
shadowOffsetYGibt den Versatz in vertikaler Richtung an.
shadowBlurGibt die Schärfe des Schattens an.

Sobald wir den Offset verändern, wird der Schatten sichtbar:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="250" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.shadowColor = "#F00"; //Rot Context.shadowOffsetX = 10; Context.shadowOffsetY = 10; Context.shadowBlur = 10; Context.fillRect( 10, 10, 50, 50 );

Globaler Alpha-Kanal

Wenn wir ein Objekt sehen wollen, das hinter einem anderen liegt, brauchen wir Transparenz. Dafür können wir den Member globalAlpha vom Kontext-Objekt auf einen Wert von 0 bis 1 stellen, wobei 0 komplette Transparenz und 1 volle Deckkraft bedeutet.

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="250" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.globalAlpha = 0.5; Context.fillStyle = "#F00"; //Rot Context.fillRect( 10, 10, 100, 100 ); Context.fillStyle = "#00F"; //Blau Context.fillRect( 50, 50, 100, 100 );

Globale Operationen

Mit dem Member globalCompositeOperation des Kontext-Objekts, können wir Einfluss darauf nehmen, wie Objekte miteinander zusammengesetzt werden sollen. Als Wert muss einer der folgenden Typen genommen werden, welche als String angenommen werden:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <div id="canvas_collection"></div> </body> </html>
var CompTypes = [ "source-atop", "source-in", "source-out", "source-over", "destination-atop", "destination-in", "destination-out", "destination-over", "lighter", "copy", "xor" ]; for (var n = 0; n < CompTypes.length; n++) { var Canvas = document.createElement("canvas"); Canvas.width = 200; Canvas.height = 200; Canvas.style = "border: 1px solid #000"; document.getElementById("canvas_collection").appendChild(Canvas); var Context = Canvas.getContext("2d"); Context.fillStyle = "blue"; Context.fillRect(0,0, 100, 100); Context.globalCompositeOperation = CompTypes[n]; Context.fillStyle = "red"; Context.fillRect(75, 75, 100,100); Context.globalCompositeOperation = "source-over"; Context.fillStyle = "#000"; Context.font = "20px Lucida"; Context.fillText( CompTypes[n], 20, 190 ); }