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

HTML5 Canvasでシャドウ（影）を描く方法 ― shadowColor・shadowOffset・shadowBlurの使い方

HTML5のCanvas（キャンバス）には、描画した図形やテキストの周囲に美しい影（シャドウ）を作成する機能が備わっています。影の見た目は、以下の4つのグローバル属性によって制御され、これらの設定はすべての描画操作に反映されます。

番号プロパティと説明
1shadowColor [ = value ]
現在の影の色を返すプロパティです。値を設定することで、影の色を変更できます。
2shadowOffsetX [ = value ]
現在の影のX方向（横方向）のオフセット量を返すプロパティです。値を設定することで、影の横へのずれを調整できます。
3shadowOffsetY [ = value ]
現在の影のY方向（縦方向）のオフセット量を返すプロパティです。値を設定することで、影の縦へのずれを調整できます。
4shadowBlur [ = value ]
影に適用されているぼかしの度合いを返すプロパティです。値を設定することで、ぼかしの強さを変更できます。

シャドウ描画のサンプルコード

次のコードを実行すると、テキストに影を付けて描画することができます。

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

      <script type>
         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('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

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

コードの解説

このサンプルでは、まずdocument.getElementById()でcanvas要素を取得し、getContext('2d')によって2D描画コンテキストを取得しています。続いて、shadowOffsetXとshadowOffsetYで影のずれをそれぞれ2ピクセルに設定し、shadowBlurでぼかしの強さを指定、shadowColorには半透明の黒「rgba(0, 0, 0, 0.5)」を指定しています。

最後にfillText()メソッドでテキストを描画すると、事前に設定した影が自動的に適用されます。なお、ブラウザがCanvas APIに対応していない場合は、アラートによって対応ブラウザ（SafariまたはFirefox 1.5以降）が必要である旨が通知される仕組みになっています。


  1. HTML5のdrawImage()メソッドを使ってCanvasに画像を描画する方法

    HTML5の drawImage() メソッドは、キャンバス（canvas）上に画像・別のcanvas・動画などを描画するために使用します。画像の一部だけを切り取って描画することもでき、描画時にサイズを拡大・縮小することも可能です。 drawImage()メソッドのパラメータ一覧 drawImage() メソッドで指定できるパラメータとその説明は以下の通りです。 番号パラメータと説明 1img描画対象となる画像（image）、canvas、または video を指定します。 2sxクリッピング（切り抜き）を開始するx座標。省略可能です。 3syクリッピングを開始するy座標。省略可能です

  2. HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：