HTML5 Canvas を使用して動的な線形グラデーションを描画する方法-H5 チュートリアル-php.cn

HTML5 Canvas を使用して動的な線形グラデーションを描画する方法

不言

リリース： 2018-12-05 10:12:08

オリジナル

4569 人が閲覧しました

HTML5 Canvas を使用して線形グラデーションを描画する場合は、createLinearGradient() メソッドを使用する必要があります。以下、具体的な内容を見ていきましょう。

HTML5 canvas

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(&#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.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        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.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          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() 関数を実行します。ページが表示されたとき。
ページが表示されると、イベントリスナーに加えて次のコードが処理されます。
キャンバス上に描画するには、getElementsByTagName() メソッドを使用して ID からキャンバスオブジェクトを取得します。キャンバスオブジェクトの getContext() メソッドを呼び出して、キャンバスのコンテキストを取得します。 clearRect() メソッドを呼び出してキャンバスを初期化します。
グラデーションの作成は、createLinearGradient() メソッドによって作成されます。作成に成功すると戻り値としてグラデーションオブジェクトが返されます。グラデーションの開始色と終了色は、グラデーションオブジェクトの addColorStop() メソッドによって設定されます。
キャンバス上にグラデーションを描画するコンテキストの fillStyle にグラデーションオブジェクトを割り当て、fillRect() メソッドを実行することで、キャンバス上にグラデーションを描画できます。

   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.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        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.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          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 canvas