Manuale di riferimento HTML

Completo della guida HTML

Attributo shadowBlur di HTML canvas

L'attributo shadowBlur viene utilizzato per impostare il livello di sfocatura dell'ombra. Il valore predefinito è 0. L'elemento <canvas> consente di disegnare grafici su una pagina web utilizzando JavaScript.

Manuale di riferimento per HTML canvas

Esempio online

Disegnare un rettangolo giallo con ombra verde e blu, con un livello di sfocatura di 20:

Ora vediamo un esempio per implementare l'attributo shadowBlur del canvas:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Utilizzo dell'attributo shadowBlur di HTML canvas (Guida di base su oldtoolbag.com)</title>
</head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px solid #d3d3d3;">
Il suo browser non supporta il tag canvas HTML5
</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>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano l'attributo shadowBlur.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

L'attributo shadowBlur imposta o restituisce il livello di sfocatura dell'ombra.

Valore predefinito:	0
Sintassi JavaScript:	context.shadowBlur=number;

Il numero superiore rappresenta il livello di sfocatura dell'ombra.

Valore dell'attributo

Valore	Descrizione
number	Livello di sfocatura dell'ombra

Manuale di riferimento per HTML canvas

HTML: <template> etichetta