HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5で線形グラデーションを描画する方法は？

このメソッドは、引数で表される座標で指定された線に沿って描画される線形グラデーションを表すCanvasGradientオブジェクトを返します。 4つの引数は、グラデーションの開始点（x1、y1）と終了点（x2、y2）を表します。

createLinearGradient(x0, y0, x1, y1)
ここにcreateLinearGradient（）メソッドのパラメータ値があります-

S.No
パラメータと説明
1
x0
x座標-グラデーションの開始点
2
y0
y-座標-グラデーションの開始点
3
x1
x座標-グラデーションの終点
4
y1
y座標-グラデーションの終点


HTML5で線形グラデーションを描画する方法は？

例

次のコードを実行して、HTML5で線形グラデーションを描画する方法を学ぶことができます-

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Linear Gradient</title>
   </head>

   <body>
      <canvas id="newCanvas" width="450" height="250" style="border:1px
         solid #d3d3d3;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         var linegrd = ctxt.createLinearGradient(0, 0, 170, 0);
         linegrd.addColorStop(0.5, "#E44D26");
         linegrd.addColorStop(1, "#66CC00");
         ctxt.fillStyle = linegrd;
         ctxt.fillRect(50, 80, 300, 100);
      </script>
   </body>
</html>

  1. HTML5でarc（）を使用して円を描く方法は？

    arc（）メソッドは、canvas要素を使用してHTML5で円を作成するために使用されます。 arc（）メソッドを使用する円の場合、開始角度を0に、終了角度を2*Math.PIに使用します。 これがarc（）メソッドのパラメータ値です- S。いいえ パラメータ 説明 1 x x座標 2 y y座標 3 r 円の半径 4 startingAngle ラジアン単位の開始角度 5 endingAngle ラジアン単位の終了角度 6 反時計回り（True / False）

  2. HTML5でlineTo（）を使用して線を引く方法は？

    HTMLで線を描画するには、canvas要素を使用します。キャンバスでは、lineTo（）メソッドを使用して線を描画します。 lineTo（）メソッドには、線を配置するxおよびyパラメーター値が含まれています。 例 次のコードを実行して、HTML5でlineTo（）を使用して線を引くことができます- <!DOCTYPE html> <html>    <head>       <title>HTML Canvas</title>    </head>