HTML5 キャンバスで動的な放射状グラデーションを描画する方法-H5 チュートリアル-php.cn

HTML5 キャンバスで動的な放射状グラデーションを描画する方法

不言

リリース： 2019-04-15 14:36:35

オリジナル

4933 人が閲覧しました

HTML Canvas を使用して放射状グラデーションを実装する場合は、createRadialGradient() メソッドを使用する必要があります。以下、具体的な内容を見ていきましょう。

HTML5 canvas

createRadialGradient()

createRadialGradient()のパラメータは以下の通りです。

createRadialGradient (放射状グラデーションの開始の X 座標、放射状グラデーションの開始の Y 座標、放射状グラデーションの開始の半径、放射状グラデーションの終了の X 座標、放射状グラデーションの終点、放射状グラデーションの終了半径)

具体的な例を見てみましょう

円の中心が開始点にあるとき、グラデーションと最後のグラデーションの中心は一致しています

コードは次のとおりです

<!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(&#39;canvas&#39;)[0],
          ctx = null,
          grad = null,
          color = 255;      
      if (canvas.getContext(&#39;2d&#39;)) {
        ctx = canvas.getContext(&#39;2d&#39;);
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);

        grad = ctx.createRadialGradient(0, 0, 64, 0, 0, 512);
        grad.addColorStop(0, &#39;#000000&#39;);
        grad.addColorStop(1, &#39;#2869fd&#39;);
        ctx.fillStyle = grad;

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

        canvas.addEventListener(&#39;mousemove&#39;, 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, &#39;#000000&#39;);
          grad.addColorStop(1, &#39;#2869fd&#39;);

          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(&#39;canvas&#39;)[0],
          ctx = null,
          grad = null,
          color = 255;      
          if (canvas.getContext(&#39;2d&#39;)) {
        ctx = canvas.getContext(&#39;2d&#39;);
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createRadialGradient(0, 0, 64, 128, 64, 320);
        grad.addColorStop(0, &#39;#b43700&#39;);
        grad.addColorStop(1, &#39;#ffe063&#39;);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
      }
    }

ログイン後にコピー

マウスがキャンバス上で移動すると、次のコードが実行されます。マウス座標を中心とした円形のグラデーションを作成し、キャンバス上に描画できます。

canvas.addEventListener(&#39;mousemove&#39;, 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, &#39;#000000&#39;);
          grad.addColorStop(1, &#39;#2869fd&#39;);
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);

ログイン後にコピー

実行結果

Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。

HTML5 キャンバスで動的な放射状グラデーションを描画する方法

青いキャンバス内でマウスを移動すると、それに応じてグラデーションが変化します。

HTML5 canvas

グラデーションの開始時の円の中心とグラデーションの中心が一致するとき、グラデーションの終点の円が矛盾しています

コードは次のとおりです#

<!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(&#39;canvas&#39;)[0],
          ctx = null,
          grad = null,
          color = 255;      
      if (canvas.getContext(&#39;2d&#39;)) {
        ctx = canvas.getContext(&#39;2d&#39;);
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);

        grad = ctx.createRadialGradient(0, 0, 64, 128, 64, 320);
        grad.addColorStop(0, &#39;#b43700&#39;);
        grad.addColorStop(1, &#39;#ffe063&#39;);
        ctx.fillStyle = grad;

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

        canvas.addEventListener(&#39;mousemove&#39;, 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, &#39;#b43700&#39;);
          grad.addColorStop(1, &#39;#ffe063&#39;);

          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);
      }
    }  
</script>
</head>
<body onload="PageLoad();">
  <canvas width="1200" height="480"></canvas>
</body>
</html>

ログイン後にコピー

説明

具体的な考え方は前の例と同じです。 createRadialGradir のグラデーションの中心をマウスポインターの座標から x 方向に 128、y 方向に 64 に移動し、グラデーションの中心と終了円をずらします。

実行結果

Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。

HTML5 キャンバスで動的な放射状グラデーションを描画する方法