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

HTML5 Canvasで図形に影を付けるための4つの基本プロパティ

HTML5 Canvasの影（シャドウ）機能とは

HTML5 Canvasには、描画した図形の周囲に美しい影を生成する機能が標準で用意されています。これらの影の見た目は、コンテキストが持つ4つのグローバルな影属性によって制御され、一度設定すると、その後のすべての描画操作（矩形・円・線・テキストなど）に自動的に反映されます。

影を制御する4つのプロパティ一覧

番号プロパティと説明
1shadowColor [ = 値 ]
現在設定されている影の色を返します。値を代入することで、影の色を変更できます。CSSと同様の色指定（例：rgba(0, 0, 0, 0.5)）が可能です。
2shadowOffsetX [ = 値 ]
現在の影の横方向（X軸）のオフセット量を返します。正の値で右へ、負の値で左へ影がずれます。代入によりオフセット量を変更できます。
3shadowOffsetY [ = 値 ]
現在の影の縦方向（Y軸）のオフセット量を返します。正の値で下へ、負の値で上へ影がずれます。代入によりオフセット量を変更できます。
4shadowBlur [ = 値 ]
現在の影に適用されているぼかし（ブラー）の度合いを返します。値を大きくするほど影が柔らかくぼやけた表現になります。代入によりぼかしレベルを変更できます。

使用例

以下は、青い矩形に半透明の黒い影を付けるシンプルなコード例です。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 影の色
ctx.shadowOffsetX = 5;                  // 横方向のずれ
ctx.shadowOffsetY = 5;                  // 縦方向のずれ
ctx.shadowBlur = 10;                    // ぼかし具合

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 100);

これらのプロパティを組み合わせることで、立体感のあるUI要素や、浮き上がって見えるカードデザインなど、さまざまな視覚効果を手軽に実装できます。

  1. HTML5のCanvasで使える無料ライブラリとは？おすすめ3選をわかりやすく解説

    Webサイトにインタラクティブな要素を追加したいなら、Canvas用の無料ライブラリを活用することで開発作業を大幅に効率化できます。まずは、HTML5でキャンバスを作成する基本方法から見ていきましょう。HTML5のcanvasタグの基本HTMLの<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するために使用される要素です。このタグはHTML5で新たに導入されました。以下のコードを実行すると、HTML5でキャンバスを作成できます。サンプルコード<!DOCTYPE html> <html>   &n

  2. HTML5 CanvasでcreatePatternを使ってパターンを作成する方法

    HTML5 Canvasでは、createPattern(image, repetition)メソッドを使用することで、画像をもとにしたパターンを簡単に作成できます。このメソッドは、塗りつぶしや線描のスタイルとして利用できるパターンオブジェクトを返します。createPatternメソッドの基本構文第1引数にはパターンの元となる画像（Image要素、Canvas要素など）を指定します。第2引数には繰り返し方法を表す文字列を指定します。repetitionに指定できる値repeat … 縦横両方向にパターンを繰り返します（デフォルト）repeat-x … 水平方向のみ繰り返しますrepeat-y