HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLキャンバスのshadowBlurプロパティの使い方を解説

HTMLキャンバスのshadowBlurプロパティとは

HTMLキャンバスのshadowBlurプロパティは、図形に描画される影のぼかし度合いを設定するために使用されます。デフォルト値は「0」で、この状態では影にぼかしがまったくかかりません。

<canvas>要素を使うと、JavaScriptでWebページ上にグラフィックを描画できます。各キャンバスには、キャンバスの縦横のサイズを表すheight属性とwidth属性が用意されています。

構文

shadowBlurプロパティの基本的な構文は以下のとおりです。

ctx.shadowBlur = 数値;

ここで指定する数値は、影のぼかしレベルを表します。数値が大きくなるほど、影はより広く柔らかくぼかされます。

shadowBlurプロパティの実装例

それでは、実際にcanvasのshadowBlurプロパティを使ったサンプルコードを見てみましょう。この例では、異なるぼかしレベルと影の色を持つ2つの長方形を描画しています。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;">
</canvas>
<script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    
    // ぼかしレベル20・黒い影の緑色の長方形
    ctx.shadowBlur = 20;
    ctx.shadowColor = "black";
    ctx.fillStyle = "green";
    ctx.fillRect(40, 40, 100, 250);
    
    // ぼかしレベル30・青い影のオレンジ色の長方形
    ctx.shadowBlur = 30;
    ctx.shadowColor = "blue";
    ctx.fillStyle = "orange";
    ctx.fillRect(200, 40, 200, 150);
</script>
</body>
</html>

出力結果

上記のコードを実行すると、黒い影（blur値：20）が付いた緑色の縦長の長方形と、青い影（blur値：30）が付いたオレンジ色の横長の長方形が描画されます。影のぼかし具合がそれぞれ異なるため、視覚的な違いを確認できます。

HTMLキャンバスのshadowBlurプロパティの使い方を解説

まとめ

shadowBlurプロパティを使用する際は、shadowColorプロパティと組み合わせて影の色も指定することがポイントです。影の色を設定しない場合、ブラウザによっては影が表示されないことがあります。ぼかしレベルを調整することで、立体感のあるグラフィックや柔らかい演出など、さまざまな視覚効果を実現できます。

  1. HTML DOMのscrollLeftプロパティとは？水平スクロール位置の取得・設定方法を解説

    HTMLドキュメントにおけるDOMのscrollLeftプロパティは、要素内のコンテンツが水平方向にどれだけスクロールされているかを、ピクセル単位で取得・設定できるプロパティです。JavaScriptから動的に横スクロールの位置を制御したい場合に活用できます。 構文 scrollLeftプロパティの基本的な構文は以下のとおりです。 現在のスクロール位置を取得する element.scrollLeft スクロール位置を設定する element.scrollLeft = value valueには、移動先の位置をピクセル単位の数値で指定します。 サンプルコード それでは、scrollLeftプロパ

  2. HTML Canvasの基本を解説!図形や曲線を描画する方法

    Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。canvas要素の基本的な設定すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。<canvas id = ne