画像を並べる-HTML5編

HOME
JavaScript入門[HTML5編]
画像を並べる

このページでは、canvas上に画像を並べて描画する方法について解説します。

画像を並べる命令文

画像を並べるパターンを作成するには、createPattern()を使います。作成されたパターンを、fillSyleに設定して使います。

context.createPattern(画像,並べ方): 画像を並べ、パターンを生成します。並べ方は以下の４つがあります。; repeat　画像を縦横に敷き詰めます。; repeat-x　画像を横方向に並べます。; repeat-y　画像を縦方向に並べます。; no-repeat　画像を一つだけ表示します。

画像の並べ方を指定する値はCSSの背景画像と同じなので、覚えやすいと思います。

画像を並べるサンプル

以下のスクリプトでは、canvasに画像を並べて表示させます。 4通りの並べ方をそれぞれ確認できます。画像はヘッダーでプレロードしておくとよいでしょう。

<head>
<script>
//ヘッダーで画像をプレロードする
var img = new Image();
img.src = "img/back.png";
</script>
</head>

<canvas id="cv1" width="360" height="240"></canvas>
<script>
var ctx = document.getElementById("cv1").getContext("2d");

//4通りの並べ方を配列ptnに格納する
var ptn = new Array("repeat","repeat-x","repeat-y","no-repeat");

//画像の並べ方を指定してcanvas内に描画する関数
function img_p( num )
{
  ctx.clearRect(0,0,360,240);  //まず、前の画像を削除する
  
  //引数から、画像の並べ方を指定
  num = parseInt( num );
  var cpt = ctx.createPattern( img , ptn[num] );

  ctx.fillStyle = cpt;         //画像パターンをfillSylteに指定
  ctx.fillRect(0,0,360,240);
}
</script>

<form>
<input type="button" value="repeat" onclick="img_p(0)">
<input type="button" value="repeat-x" onclick="img_p(1)">
<input type="button" value="repeat-y" onclick="img_p(2)">
<input type="button" value="no-repeat" onclick="img_p(3)">
</form>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

CSSの背景画像の設定と同じようになっているのが判ると思います。

前へ次へ