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

HTML5 Canvasで影を描画する方法｜shadowプロパティの使い方を解説

HTML5 Canvasで影を描く基本

HTML5のCanvas APIでは、テキストや図形に対して簡単に影（シャドウ）を付けることができます。影の描画には、描画コンテキスト（ctx）が持つ4つの影関連プロパティを使用します。

サンプルコード

以下は、Canvas上に描いたテキストへ影を適用する完全なサンプルです。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            #test {
                width: 100px;
                height: 100px;
                margin: 0px auto;
            }
        </style>

        <script>
            function drawShape(){
                // DOMを使ってcanvas要素を取得
                var canvas = document.getElementById('mycanvas');

                // canvas非対応ブラウザの場合は実行しない
                if (canvas.getContext){
                    // getContextで2D描画コンテキストを取得
                    var ctx = canvas.getContext('2d');
                    ctx.shadowOffsetX = 2;
                    ctx.shadowOffsetY = 2;
                    ctx.shadowBlur = 2;

                    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
                    ctx.font = "20px Times New Roman";
                    ctx.fillStyle = "Black";
                    ctx.fillText("This is shadow test", 5, 30);
                } else {
                    alert('このデモを表示するにはSafariまたはFirefox 1.5+が必要です。');
                }
            }
        </script>
    </head>

    <body id="test" onload="drawShape();">
        <canvas id="mycanvas"></canvas>
    </body>
</html>

影に関連する4つのプロパティ

  • shadowOffsetX：影の水平方向のずらし量（オフセット）をピクセル単位で指定します。正の値で右方向、負の値で左方向に移動します。
  • shadowOffsetY：影の垂直方向のずらし量をピクセル単位で指定します。正の値で下方向、負の値で上方向に移動します。
  • shadowBlur：影のぼかし度合いを指定します。値が大きいほど、影は柔らかくぼやけた印象になります。
  • shadowColor：影の色を指定します。通常のカラーコードに加え、上記の例のようにrgba()形式を使えば半透明の影も表現できます。

コードのポイント

まずdocument.getElementById()でcanvas要素を取得し、getContext('2d')で2D描画コンテキストを取得します。canvas.getContextが存在するかどうかを判定することで、Canvas非対応の古いブラウザへの対応も可能です。

その後、shadow系プロパティを設定してからfillText()でテキストを描画すると、設定した影が自動的に適用されます。なお、これらのプロパティはfillRect()などの図形描画にも同様に作用します。

shadowBlurやshadowColorの値を変えてみると、影の見た目がどのように変わるかを確認できます。ぜひ実際に数値を調整しながら、好みの影の演出を探してみてください。

  1. HTML5 Canvasで長方形を描画する方法をわかりやすく解説

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、動的なビジュアル表現を実現するための強力な機能を提供します。canvas要素には「getContext」というDOMメソッドが用意されています。このメソッドはレンダリングコンテキストと、それに付随する描画機能一式を取得するもので、引数としてコンテキストの種類（ここでは2D描画を表す「2d」）を1つ指定します。fillRect()メソッドで長方形を描くHTML5 Canvasで長方形を描画するには、fillRec

  2. HTML5のCanvasにSVGファイルを描画する方法

    Canvas（キャンバス）にSVGを描画するには、SVGを画像として扱う必要があります。まず、HTMLコンテンツを含めるための<foreignObject>要素を使ってSVGデータを構築し、その後、生成したSVG画像をCanvas上に描画します。 具体的な流れは以下の通りです。 処理の手順 SVG文字列を作成する：<svg>要素の中に<foreignObject>要素を配置し、その中にXHTML名前空間（xmlns=https://www.w3.org/1999/xhtml）を指定したHTMLを記述します。 Blobオブジェクトに変換する：作成したSVG文