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

HTMLキャンバスstroke（）メソッド

HTMLキャンバスのstroke（）メソッドを使用して、パスを描画します。このパスは、moveTo（）およびlineTo（）メソッドを使用して描画されます。 要素を使用すると、JavaScriptを使用してWebページにグラフィックを描画できます。すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。

以下は構文です-

ctx.stroke()

ここで、canvasのstroke（）メソッドを実装する例を見てみましょう-

例

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="450" height="350" style="border:2px solid red;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.moveTo(100, 200);
   ctx.lineTo(100, 100);
   ctx.strokeStyle = "blue";
   ctx.stroke();
   ctx.beginPath();
   ctx.moveTo(30, 30);
   ctx.lineTo(20, 100);
   ctx.lineTo(70, 100);
   ctx.strokeStyle = "orange";
   ctx.stroke();
</script>
</body>
</html>

出力

HTMLキャンバスstroke（）メソッド


  1. HTMLDOMキャンバスオブジェクト

    HTML DOM Canvasオブジェクトは、HTML5で導入された要素に関連付けられています。 タグは、JavaScriptを使用してグラフィックを描画するために使用されます。キャンバスはグラフィックのコンテナとして機能します。キャンバスには、線や形などを描くことができます。 プロパティ 以下はCanvasObjectのプロパティです- プロパティ 説明 fillStyle 図面の塗りつぶしに使用される色、グラデーション、またはパターンを設定または返すため。 strokeStyle ストロークに使用される色、グラデーション、またはパターンを設定または返すため。

  2. HTMLCanvasの基本

    Webページにキャンバスを描画するには、HTML5キャンバス要素を使用します。 要素を使用すると、JavaScriptを使用してグラフィックを描画できます。キャンバスを使用して、線、長方形、ベジェ曲線などを描画します。 すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。 これに伴い、以下のコードスニペットに示すように、canvasのIDも設定する必要があります- <canvas id = "newCanvas" width = "100" height = "100">