HTML＋JavaScriptだけでブラウザに図形描画（2） - Canvas API -

Web開発

技術解説

連載 :

HTML5の便利なTips100選

2012年8月6日(月)

山田祥寛（YAMADA, Yoshihiro）

TIPS 025：画像を繰り返し表示する

fillStyle／strokeStyleプロパティには、パターンを指定することもできます。パターンとは、図形（または枠線）を塗りつぶす際に利用する画像の繰り返しのことを言います。

［リスト8］指定された画像を上下左右に繰り返し貼り付けるコード（pattern.html）

window.addEventListener('DOMContentLoaded',
  function() {
    if (HTMLCanvasElement) {
      var cv = document.querySelector('#cv');
      var c = cv.getContext('2d');
      // 画像を準備
      var img = new Image();
      img.src = 'wings.jpg';
      // 画像が準備できたら、以降の処理を実行
      img.addEventListener('load', function(e) {
        // パターンを作成（1）
        var p = c.createPattern(img, 'repeat');
        // 塗りつぶし色としてパターンをセット（2）
        c.fillStyle = p;
        c.fillRect(0, 0, 400, 300);
      });
    }
  }
);

図10：画像が上下左右に敷き詰められた（クリックで拡大）

パターンは、CanvasPatternオブジェクトで表します。CanvasPatternオブジェクトは、createPatternメソッドで作成できます（1）。

［構文］createPatternメソッド

createPattern(画像, パターンの種類)

サンプルでは、画像としてImageオブジェクトを指定していますが、その他、Video／HTMLCanvasElementなどのオブジェクトも指定できます。

パターンの種類は、画像をどのように敷き詰めるかを表すものです。指定できるパターンには、以下のようなものがあります。

設定値	概要
repeat	上下左右双方に繰り返し
repeat-x	水平方向にのみ繰り返し
repeat-y	垂直方向にのみ繰り返し
no-repeat	繰り返さない

パターンを作成できたら、後はこれをfillStyleプロパティにセットすることで、塗りつぶし色としてパターンが適用されます（2）。ここではキャンバス全体をパターンで塗りつぶしたいので、fillRectメソッドでキャンバスと同じ大きさの四角形を描画しています。

TIPS 026：画像の特定領域を切り抜く

clipメソッドを利用することで、キャンバスの特定の領域だけを切り抜きます（これをクリッピング領域と言います）。clipメソッドが呼び出された場合、以降は、クリッピング領域に対してのみ図形が描画できるようになります。

［リスト9］指定された円の領域内のみ画像を描画するコード（clip.html）

window.addEventListener('DOMContentLoaded',
  function() {
    if (HTMLCanvasElement) {
      var cv = document.querySelector('#cv');
      var c = cv.getContext('2d');
      // 円を描画
      c.beginPath();
      c.arc(250, 180, 100, 0, 2 * Math.PI, false);
      c.stroke();
      // 現在のパスに基づいて、クリッピング領域を定義
      c.clip();
 
      // 画像を準備＆貼り付け（2）
      var img = new Image();
      img.src = 'rin.jpg';
      img.addEventListener('load', function(e) {
        c.drawImage(img, 0, 0, 400, 300);
      });
    }
  }
);

図11：円の内部でのみ画像を描画（クリックで拡大）

この例では、arcメソッドで円のパスを定義した後で、clipメソッドを呼び出していますので（1）、以降の画像貼り付け（2）は円で囲まれた領域内に対してのみ反映されることになります。

サンプルでは、strokeメソッドで枠囲みしていますが、単にクリッピング領域を定義したいだけであれば、strokeメソッドは省略しても構いません。

クリッピング領域とパスを組み合わせることで、より複雑な画像の貼り付けが可能になります。

TIPS 027：特定の座標がパス領域に含まれるかを判定する

isPointInPathメソッドを利用することで、指定された座標が現在のパス領域に含まれるかを判定できます。

［リスト10］座標がパスに含まれるかを確認するコード（inpath.html）

window.addEventListener('DOMContentLoaded',
  function() {
    if (HTMLCanvasElement) {
      var cv = document.querySelector('#cv');
      var c = cv.getContext('2d');
      // 多角形を描画
      c.beginPath();
      c.moveTo(15, 15);
      c.lineTo(30, 250);
      c.lineTo(250, 200);
      c.lineTo(280, 130);
      c.lineTo(250, 80);
      c.closePath();
      c.stroke();
     
      //c.beginPath();
 
      // 座標（100, 100）がパスの領域内に含まれるかをチェック
      if (c.isPointInPath(100, 100)) {
        window.alert('座標はパスに含まれます。');
      } else {
        window.alert('座標はパスの領域外です。');
      }
    }
  }
);