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

ベジェ曲線を描画するためのHTMLキャンバス

ベジェ曲線を描画するには、HTMLでBezierCurveTo（）メソッドを使用します。最初に構文を見てみましょう-

ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

ここで

  • cp1x −最初のベジェ制御点のx座標を表します
  • cp1y −最初のベジェ制御点のy座標を表します
  • cp2x −2番目のベジェ制御点のx座標を表します
  • cp2y −2番目のBexierコントロールポイントのy座標を表します
  • x −終点のx座標を表します
  • y −終点のy座標を表します

以下は例です-

例

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas" width = "550" height = "300" style = "border −2px solid blue;"></canvas>
<script>
   var c = document.getElementById('newCanvas');
   var ctx = c.getContext('2d');
   ctx.beginPath();
   ctx.moveTo(50, 20);
   ctx.bezierCurveTo(100, 150, 200, 100, 200, 50);
   ctx.stroke();
</script>
</body>
</html>

出力

ベジェ曲線を描画するためのHTMLキャンバス


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

    HTMLキャンバスのstroke（）メソッドを使用して、パスを描画します。このパスは、moveTo（）およびlineTo（）メソッドを使用して描画されます。 要素を使用すると、JavaScriptを使用してWebページにグラフィックを描画できます。すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。 以下は構文です- ctx.stroke() ここで、canvasのstroke（）メソッドを実装する例を見てみましょう- 例 <!DOCTYPE html> <html> <body> <canvas

  2. HTMLCanvasの基本

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