HTML リファレンスマニュアル

HTML タグ一覧

HTML: <template> タグ

HTML canvas shadowBlur 属性

shadowBlur属性は、影のぼかしレベルを設定するために使用されます。デフォルト値は0です。 <canvas>要素は、JavaScriptを使用してウェブページ上にグラフィックを描画できるようにします。

HTML canvas 参考書

オンラインサンプル

緑色と青色の影を持つ黄色の矩形を描画し、模糊レベルは 20：

今、canvasのshadowBlur属性を実現するためのサンプルを見てみましょう：

例

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　shadowBlur　属性の使用(基本教程網　w3(codebox.com)</<title>
</<head>
<body>
<canvas　id="newCanvas"　width="450"　height="250"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　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 属性は影のぼやけのレベルを設定または返します。

デフォルト値：	0
JavaScript 文法：	context.shadowBlur=number;

上のnumberは影のぼやけのレベルを示します。

属性値

値	説明
number	影のぼやけのレベル

HTML canvas 参考書

HTML: <template> タグ