HTML canvas shadowOffsetX-Eigenschaft

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

shadowOffsetX Eigenschaftsstellungen oder Rückgabe der horizontalen Entfernung zwischen Shape und Schatten.

  • shadowOffsetX=0 Indiziert, dass der Schatten direkt unter dem Shape liegt
  • shadowOffsetX=20 Indiziert, dass der Schatten 20 Pixel rechts von der left-Position des Shapes liegt
  • shadowOffsetX=-20 Indiziert, dass der Schatten 20 Pixel links von der left-Position des Shapes liegt

Hinweis:Um die vertikale Position zum Shape anzupassen, verwenden Sie shadowOffsetY Eigenschaften.

Beispiel

Zeichnen Sie ein Rechteck mit einem 20 Pixel nach rechts versetzten Schatten (von der left-Position des Rechtecks):

Ihr Browser unterstützt das canvas-Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

Versuchen Sie es selbst

Syntax

context.shadowOffsetX=number;

Attributwert

Wert Beschreibung
number Positiver oder negativer Wert, definiert den horizontalen Abstand des Schattens zur Form.

Technische Details

Standardwert: 0

Browser-Unterstützung

Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Version des Browsers, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

HTML5 Canvas Referenzhandbuch