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

HTML5 CanvasのshadowOffsetYプロパティの使い方を徹底解説

HTMLのCanvasで使用されるshadowOffsetYプロパティは、図形から影までの垂直方向（縦方向）の距離を設定するためのものです。影の位置を上下にずらすことで、より立体的で奥行きのある描画表現が可能になります。

<canvas>要素を使うと、JavaScriptを通じてWebページ上に自由にグラフィックを描画できます。なお、canvas要素には描画領域のサイズを指定するための「width（幅）」と「height（高さ）」という2つの属性が用意されています。

shadowOffsetYの構文

shadowOffsetYプロパティの基本的な書き方は以下のとおりです。

context.shadowOffsetY = num;

ここで「num」には、影をずらす垂直方向の距離をピクセル単位で指定します。正の値を設定すると影は下方向へ、負の値を設定すると上方向へ移動します。

shadowOffsetYの実装例

それでは、実際にcanvasのshadowOffsetYプロパティを使ったサンプルコードを見てみましょう。

サンプルコード

<!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");
    ctx.shadowBlur = 30;
    ctx.shadowOffsetX = 35;
    ctx.shadowOffsetY = 35;
    ctx.shadowColor = "orange";
    ctx.fillStyle = "red";
    ctx.fillRect(150, 60, 280, 250);
</script>
</body>
</html>

実行結果

このコードを実行すると、赤い四角形に対してオレンジ色の影が右下方向（X方向・Y方向ともに35px）にずれて表示されます。shadowBlurで30pxのぼかしを加えているため、柔らかく自然な影の効果が得られます。

関連するシャドウ系プロパティ

影の描画を制御するプロパティは他にもあります。組み合わせて使うことで、より多彩な表現が可能です。

  • shadowOffsetX： 影の水平方向（横方向）の距離を設定
  • shadowBlur： 影のぼかし具合を設定
  • shadowColor： 影の色を設定

これらのプロパティとshadowOffsetYを適切に組み合わせることで、ボタンやカードUIなどに立体感を持たせたデザインを簡単に実装できます。

  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