[JavaScript] HTML Canvas に動的に円形グラデーションを描画する

このページのタグ:[JavaScript] [HTML] [HTML Canvas]
HTML Canvas に動的に円形グラデーションを描画するコードを紹介します。

概要

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

createRadialGradient()

createRadialGradient()の引数は以下になります。
createRadialGradient(グラデーションの開始円の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.createRadialGradient(0, 0, 64, 0, 0, 512);
        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.createRadialGradient(x, y, 64, x, y,512);
          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()関数が実行されます。

PageLoad関数の下記コードがページ読み込み時に実行されます。
キャンバスオブジェクトはgetElementsByTagName()関数でオブジェクトを取得し、getContextでキャンバスのコンテキストを取得します。初期化はコンテキストのclearRect()メソッドでクリアします。グラデーションの作成は、コンテキストのcreateRadialGradient()メソッドで作成します。成功するとグラデーションオブジェクトが戻り値で返ります。グラデーションのカラーはグラデーションオブジェクトの addColorStopメソッドで指定します。
キャンバスへの描画はコンテキストのfillStyleにグラデーションオブジェクトを代入し、fillRectメソッドでグラデーションを描画できます。

      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.createRadialGradient(0, 0, 64, 128, 64, 320);
        grad.addColorStop(0, '#b43700');
        grad.addColorStop(1, '#ffe063');
        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.createRadialGradient(x, y, 64, x, y,512);
          grad.addColorStop(0, '#000000');
          grad.addColorStop(1, '#2869fd');

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

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


青色のキャンバス内でマウスポインタを移動させると、リアルタイムでグラデーションが変化します。



コード例 (グラデーション開始とグラデーション終了の円の中心が一致していない場合)


<!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.createRadialGradient(0, 0, 64, 128, 64, 320);
        grad.addColorStop(0, '#b43700');
        grad.addColorStop(1, '#ffe063');
        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.createRadialGradient(x, y, 64, x+128, y+64, 320);
          grad.addColorStop(0, '#b43700');
          grad.addColorStop(1, '#ffe063');

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

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

解説

ロジックは先の例と同様です。createRadialGradientのグラデーション終了の円の中心をマウスポインタの座標からx方向に+128, y方向に+64して、グラデーション開始と終了の円の中心をずらしています。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


青色のキャンバス内でマウスポインタを移動させると、リアルタイムでグラデーションが変化します。グラデーションの開始位置と終了位置の中心点が違うため、グラデーションが対称になっていないことも確認できます。



プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)