HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas shadowBlur Eigenschaft

Die shadowBlur-Eigenschaft wird verwendet, um die Unschärfe des Schattens zu stellen. Der Standardwert ist 0. Der <canvas>-Element ermöglicht es Ihnen, mit JavaScript auf der Webseite Grafiken zu zeichnen.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen Sie einen gelben Rechteck mit grüner und blauer Schatten, deren Unschärfe Grad ist 20:

Lassen Sie uns einen Beispiel betrachten, um die canvas shadowBlur-Eigenschaft zu implementieren:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der HTML canvas shadowBlur-Eigenschaft (Grund教程网 w3(codebox.com)</<title>
</<head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px fest, #d3d3d3">
Ihr Browser unterstützt keine HTML5　canvas-Tag
</canvas>
<script>
　　　var c = document.getElementById("newCanvas");
　　　var ctx = c.getContext("2d");
　　　ctx.shadowBlur =　20;
　　　ctx.shadowColor = "black";
　　　ctx.fillStyle = "green";
　　　ctx.fillRect(4,　4,　100,　150);
　　　ctx.shadowBlur =　30;
　　　ctx.shadowColor = "blue";
　　　ctx.fillStyle = "orange";
　　　ctx.fillRect(200,　40,　200,　150);
</script
</body>
</html>

Test it out ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome and Safari support the shadowBlur property.

Note:Internet Explorer 8 Versions prior to and including do not support the <canvas> element.

Definition and Usage

The shadowBlur property sets or returns the blur level of the shadow.

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

The number above represents the blur level of the shadow.

Attribute Value

Value	Description
number	Blur level of the shadow

HTML canvas Reference Manual

HTML: <template> Tag