イナヅマTVログ

Canvas始めました – 塗りパターン : createPattern

| 0件のコメント

画像を塗りパターンに使うの巻。

createPattern(image:Bitmap, repeat:String)
imageは Imageインスタンス, Canvasエレメント, Videoエレメントの使用が可能。
ビットマップだったらいいのかな。

repeatは以下の文字が指定可能、繰返し種類を指定。
repeat:両方向(デフォルト)
repeat-x:水平方向のみ
repeat-y:垂直方向のみ
no-repeat:なし

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var img = new Image();
img.src='images/Diamond.png';
 
img.onload = function () {
  var pattern = context.createPattern(img,'repeat');
  context.fillStyle = pattern;
  context.fillRect(0,0,200,120);
};

元画像

Diamond 45x45

Diamond 45x45


createPattern

画像を使用するときonloadが完了していないとエラーになる。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください