タイル柄の背景画像を描写→色をランダムで自動変化させる

2021・06・11

＊背景にタイル柄の画像を描写し、さらにタイルの色を自動的に変化させます＊

今回は、HTMLのcanvas要素、CSSのbackground-image、そしてJavaScriptのcontext関連やsetInterval()メソッドを利用して、「背景に画像を描写し、その背景の画像の色がランダムで自動的に変化していく」という機能を作ってみました。

以下、簡単にですがコードの解説です。

1）HTMLにcanvas要素を配置→CSSで隠しておく（display:noneでも可）ついでに背景画像を設置したい要素もdocument.querySelector()などで取得して変数に代入しておく

2）canvas要素にJavaScriptでタイル柄を描写。その際、context.fillStyleをrgbaで指定するようにして、Math.randomでランダムな数値をrgba値にそれぞれ代入。
さらにその際、rgba値が極端な数値（＝極端な色）にならないように、計算式を調整。かつ、最大値は255を超えないようにする。
なお、rgbaのa（アルファ）値はランダムではなく固定にしておく。（でないと透明度がバラバラになり、コンテンツの見やすさに大きな影響が出るため）

3）toDataURL()メソッドでURL書き出す→変数に代入

4）背景画像として挿入したい要素に、style.backgroundImage = 〜で、3）で書き出したURLを代入

5）2）〜4）をsetInterval()メソッドでお好みの秒数、繰り返し処理を行うように設定
end

主な使用機能：HTML（canvas）・CSS・JavaScript

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .sample_tilebackground {
        width: 70%;
        height: 30vh;
        margin: 1.5rem auto;
        background-image: url();
        background-size: 10%;
        transition: all .5s;
      }
      #sampletile_canvas {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="sample_tilebackground">

    </div>

    <canvas id="sampletile_canvas" width="300" height="300"></canvas>

    <script type="text/javascript">
      {
        const tileCanvas = document.getElementById('sampletile_canvas');
        const context = tileCanvas.getContext('2d');
        const background = document.querySelector('.sample_tilebackground');

        context.fillStyle = '#ffffff';

        context.fillRect(0,0,150,150);
        context.fillRect(150,150,300,300);

        context.fillStyle = 'rgba(123, 159, 189, 0.5)';
        context.fillRect(150,0,300,150);
        context.fillRect(0,150,150,300);

        const dataURL = tileCanvas.toDataURL();
        background.style.backgroundImage = `url(${dataURL})`;


        setInterval( () => {
          const randomNum1 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
          const randomNum2 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
          const randomNum3 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);

          context.fillStyle = '#ffffff';

          context.fillRect(0,0,150,150);
          context.fillRect(150,150,300,300);

          context.fillStyle = `rgba(${randomNum1}, ${randomNum2}, ${randomNum3},0.5)`;
          context.fillRect(150,0,300,150);
          context.fillRect(0,150,150,300);

          const dataURL2 = tileCanvas.toDataURL();
          background.style.backgroundImage = `url(${dataURL2})`;

        },1000);
      }
    </script>
  </body>
</html>

« 前の記事へ次の記事へ »