HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas shadowOffsetX Eigenschaft

shadowOffsetX ist die Eigenschaft von Canvas 2Das D API beschreibt die Eigenschaft, die den horizontalen Versatz der Schatten abhängig macht.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen einer Schatten auf der rechten Seite20 Pixel (von der linken Position dieses blauen Rechtecks beginnend) verlaufende Rechteck:

Beispiel zur Verwendung der HTML canvas shadowOffsetX-Eigenschaft:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der HTML canvas shadowOffsetX-Eigenschaft (Grund教程网 oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tags.
</canvas>
<script>
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);
</script>
</body>
</html>

Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome and Safari support the shadowOffsetX attribute.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The shadowOffsetX property sets or returns the horizontal distance between the shadow and the shape.
shadowOffsetX = 0 means the shadow is exactly behind the shape.
shadowOffsetX = 20 means the shadow starts from the left side of the shape and extends to the right20 pixels.
shadowOffsetX = -20 means the shadow starts from the left side of the shape and extends to the left20 pixels.

Tip:To adjust the vertical distance of the shadow from the shape, use shadowOffsetY Attribute.

Default Value:	0
JavaScript Syntax:	context.shadowOffsetX=number;

Attribute Value

Value	Description
number	Positive or negative value, defines the horizontal distance of the shadow from the shape.

HTML canvas Reference Manual

HTML: <template> Tag