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

HTML5 Canvasで2次曲線を描く方法は？

HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 canvas要素にはgetContextと呼ばれるDOMメソッドがあり、レンダリングコンテキストとその描画関数を取得します。この関数は、コンテキスト2dのタイプという1つのパラメーターを取ります。

HTML5キャンバスで2次曲線を描画するには、quadraticCurveTo（）メソッドを使用します。このメソッドは、指定されたポイントを現在のパスに追加し、指定されたコントロールポイントを持つ2次ベジェ曲線によって前のパスに接続されます。

HTML5 Canvasで2次曲線を描く方法は？

次のコードを実行して、HTML5Canvasで2次曲線を描画する方法を学ぶことができます。 quadraticCurveTo（）メソッドのxおよびyパラメーターは、エンドポイントの座標です。 cpxとcpyは、コントロールポイントの座標です。

例 
<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="500" height="300" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');

         // Draw shapes
         ctx.beginPath();
         ctx.moveTo(75,25);
         ctx.quadraticCurveTo(25,25,25,62.5);
         ctx.quadraticCurveTo(25,100,50,100);
         ctx.quadraticCurveTo(50,120,30,125);
         ctx.quadraticCurveTo(60,120,65,100);
         ctx.quadraticCurveTo(125,100,125,62.5);
         ctx.quadraticCurveTo(125,25,75,25);
         ctx.stroke();
      </script>
   </body>
</html>

出力

HTML5 Canvasで2次曲線を描く方法は？


  1. HTML5キャンバスで画像を使用する方法は？

    HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 HTML5キャンバスで画像を使用するには、drawImage（）メソッドを使用します。このメソッドは、指定された画像をキャンバスに描画します。 次のコードを実行して、HTMLCanvasで画像を使用する方法を学ぶことができます。ここで、画像は画像またはキャンバスオブジェクトへの参照です。 xとyは、画像を配置するターゲットキャンバス上の座標を形成します。 例 <!DOCTYPE HTML> <html>  

  2. ベジェ曲線を描画するための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&g