Canvasによるクリップ

HTML5のCanvasを使用して図を表示する場合は、まず図を描く領域を指定します。
このサンプルでは、htmlソース中に以下のように記述しています。

<canvas id="t1" width="320" height="240"></canvas>

CanvasはSVGの様にインラインで記述できず、javascriptで図形を指定して描画する必要があります。htmlを読み込んだ時に自動にjavascriptが実行されるようにwindow.onload = function(){にソースを記述しています。
次にgetElementByIdを使用してCanvasオブジェクトを取得しgetContextメソッドがセットされているかチェックします。
セットされていた場合、Canvas要素よりコンテキストを作成するために、

var ctx = canvas.getContext('2d');

を呼び出します。ctxにコンテキストが返されます。
arcにより円形のクリップのパスを作成します。
clipによりクリップを適用します。
new ImageによりImageオブジェクトを作成し、srcプロパティにファイル名を設定して画像ファイルをロードします。
ロードの完了後に描画する必要があるため、onloadイベントを設定しロード完了後にdrawImageを呼び出すようにします。

以下に320*240の領域に座標画像ファイルimage1.jpgをロードして円形でクリップする場合のソースコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="t1" width="320" height="240">
  </canvas>
  <script type="text/javascript">
    window.onload = function(){
      var canvas = document.getElementById('t1');
      if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(160,100,70,0,Math.PI*2,true);
        ctx.clip();
        var img=new Image();
        img.src="image1.jpg";
        img.onload=function(){
          ctx.drawImage(img,0,0);
        }
      }
    }
  </script>
</body>
</html>

ソースファイルのダウンロード(clip.zip)

ページのトップへ戻る

山本ワールド

コンピューター

Canvasによるクリップ

Canvasによるクリップ