HTML canvas shadowOffsetY-Eigenschaft

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

shadowOffsetY Die Eigenschaft setzt oder gibt die vertikale Entfernung zwischen der Form und dem Schatten zurück.

  • shadowOffsetY=0 Indiziert, dass der Schatten direkt unter der Form liegt
  • shadowOffsetY=20 Indiziert, dass der Schatten 20 Pixel unter der Top-Position der Form liegt
  • shadowOffsetY=-20 Indiziert, dass der Schatten 20 Pixel über der Top-Position der Form liegt

Hinweis:Um die horizontale Position der Form anzupassen, verwenden Sie shadowOffsetX Eigenschaften.

Beispiel

Zeichnen Sie ein Rechteck mit einem nach unten versetzten Schatten von 20 Pixeln (von der Top-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.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

Probieren Sie es selbst aus

Syntax

context.shadowOffsetY=number;

Attributwert

Wert Beschreibung
number Positive oder negative Werte, die den vertikalen Abstand des Schattens zur Form definieren.

Technische Details

Standardwert: 0

Browser-Unterstützung

Die in der Tabelle genannten Zahlen geben die erste Browser-Version an, 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