javascript canvasで画像を繰り返して表示する

javascript canvasで画像を繰り返して表示する

javascriptで、canvasタグを使用して画像を繰り返して表示するサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

canvasタグ使い方

createPatternを使用すれば、画像を繰り返して表示することが可能です。

createPattern一覧

  • repeat : 水平+垂直にパターン繰り返し
  • repeat-x : 水平方向にのみ繰り返し
  • repeat-y : 垂直方向にのみ繰り返し
  • no-repeat : 繰り返ししない

サンプルコード

以下は、
「実行」ボタンをクリックすると、画像を繰り返して表示する
サンプルコードとなります。

※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。また関数もアロー関数を使用してます。

画像が繰り返し表示されていることが確認できます。