Canvasによるパターンの描画サンプル

2024年01月16日(火) 09時33分更新 icon 項目のみ表示/展開表示の切り替え

Canvasによるパターンの描画

jpgファイルを使って連続して（繰り返して）図形を塗りつぶす例をしまします。
1個のjpgファイルは猫1匹です。
new ImageによりImageオブジェクトを作成し、srcプロパティにファイル名を設定して画像ファイルをロードします。
ロードの完了後に描画する必要があるため、onloadイベントを設定しロード完了後にcreatePatternでオブジェクトを作成し四角形を描画するようにしています。

createPattern(image,"repetition")

image

imageオブジェクトを指名します。<canvas>,<img>,<video>のいずれかが使用できます。

repetition

空白
repeat
水平・垂直方向にパターンを繰り返す。
repeat-x
水平方向のみパターンを繰り返す。
repeat-y
垂直方向のみパターンを繰り返す。
no-repeat
パターンを繰り返さない、

サンプル


<!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');
        var img=new Image();
        img.src="image2.jpg";
        img.onload=function(){
          ctx.beginPath();
          var ptn=ctx.createPattern(img,'');
          ctx.fillStyle=ptn;
          ctx.fillRect(50,50,200,150);
        }
      }
    }
  </script>
</body>
</html>
ソースファイルのダウンロード(ptn.zip)