HTML Canvas に動的に線形グラデーションを描画する

HTML Canvas に動的に線形グラデーションを描画するコードを紹介します。

概要

HTML Canvasで線形グラデーションを描画するには、createLinearGradient()メソッドを利用します。

createLinearGradient()

createLinearGradient()の引数は以下になります。

createLinearGradient(グラデーションの開始位置のX座標, グラデーションの開始位置のY座標, グラデーションの終了位置のX座標, グラデーションの終了位置のY座標)

コード例

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <style>
    body {
      background: #C0C0C0;
    }
  </style>

  <script>
    function PageLoad() {
      var CanvasWidth = 1200;
      var CanvasHeight = 480;

      var canvas = document.getElementsByTagName('canvas')[0],
          ctx = null,
          grad = null,
          color = 255;

      if (canvas.getContext('2d')) {
        ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);

        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, '#000000');
        grad.addColorStop(1, '#2869fd');
        ctx.fillStyle = grad;

        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);

        canvas.addEventListener('mousemove', function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,

          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, '#000000');
          grad.addColorStop(1, '#2869fd');

          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);
      }
    }
  </script>

</head>
<body onload="PageLoad();">
  <canvas width="1200" height="480"></canvas>

</body>
</html>

解説

bodyタグの onload イベントによりページ表示時にPageLoad()関数が実行されます。
ページ表示時にはイベントリスナーを除く下記のコードが処理されます。
キャンバスへの描画は、getElementsByTagName()メソッドによりIDからキャンバスオブジェクトを取得します。キャンバスオブジェクトのgetContext()メソッドを呼び出しキャンバスのコンテキストを取得します。キャンバスの初期化はclearRect()メソッドを呼び出して処理します。
グラデーションの作成はcreateLinearGradient()メソッドにより作成します。作成に成功するとグラデーションオブジェクトが戻り値で返ります。グラデーションの開始色、終了色はグラデーションオブジェクトのaddColorStop()メソッドで設定します。
グラデーションのキャンバスへの描画は、コンテキストのfillStyleにグラデーションオブジェクトを代入し、fillRect()メソッドを実行することでグラデーションをキャンバスに描画できます。

    function PageLoad() {
      var CanvasWidth = 1200;
      var CanvasHeight = 480;

      var canvas = document.getElementsByTagName('canvas')[0],
          ctx = null,
          grad = null,
          color = 255;

      if (canvas.getContext('2d')) {
        ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);

        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, '#000000');
        grad.addColorStop(1, '#2869fd');
        ctx.fillStyle = grad;

        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
      }
    }

キャンバス内でマウスポインタを移動させると下記のイベントリスナのコードが実行されます。キャンバスでのマウス移動の検出の詳細はこちらの記事を参照して下さい。
マウスポインタの座標からキャンバスの右下に向かって線形グラデーションを作成し、キャンバスに描画します。

        canvas.addEventListener('mousemove', function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,

          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, '#000000');
          grad.addColorStop(1, '#2869fd');

          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);