createPatternの読み方

javascriptで利用されるメソッドの1つである「createPattern」の読み方を掲載してます。

読み⽅

「クリエイトパターン」と読みます。

英訳

「Pattern」は「模様、絵柄、パターン」という意味があります。

createPatternとは

javascriptで、canvasタグを使用して画像の繰り返しを行うメソッドとなります。

/** html **/

<canvas id="cvs"></canvas>

/** js **/

// 2D図形を扱う
const ctx = cvs.getContext('2d');

// Image オブジェクトを生成
const img = new Image; // ()を省略
// 画像を表示
img.src = '150x150.png';

// 画像読み込み完了後に描画
img.onload = () => {
  // 画像と繰り返し方法を指定
  const pattern = ctx.createPattern(img, 'repeat');
  // 塗りつぶし
  ctx.fillStyle = pattern;
  // fillRect(四角形の左上のx座標, 四角形の左上のy座標, 四角形の幅, 四角形の高さ)
  ctx.fillRect(0, 0, 750, 150);
}

実行結果