shadowBlur屬性用于設(shè)置陰影的模糊級別。默認值為0。 <canvas>元素允許您使用JavaScript在網(wǎng)頁上繪制圖形。
繪制一個帶有黑色陰影的綠色以及藍色陰影的黃色矩形，模糊級數(shù)是 20：
現(xiàn)在讓我們看一個示例來實現(xiàn)canvas的shadowBlur屬性：
<!DOCTYPE html>
<html>
<head>
<title>HTML canvas shadowBlur 屬性的使用(菜鳥教程 cainiaoplus.com)</title>
</head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽
</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>測試看看 ?/?IEFirefoxOperaChromeSafari
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 shadowBlur 屬性。
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
shadowBlur 屬性設(shè)置或返回陰影的模糊級數(shù)。
| 默認值： | 0 |
|---|---|
| JavaScript 語法： | context.shadowBlur=number; |
| 值 | 描述 |
|---|---|
| number | 陰影的模糊級數(shù) |