ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 キャンバスで動的な放射状グラデーションを描画する方法

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

不言
不言オリジナル
2018-12-03 14:40:484917ブラウズ

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


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 キャンバスで動的な放射状グラデーションを描画する方法

キャンバス内でマウスを移動すると、それに応じてグラデーションが変化します。グラデーションの開始位置と終了位置の中心点が異なるため、グラデーションが非対称であることが確認できます。

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


以上がHTML5 キャンバスで動的な放射状グラデーションを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。