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

HTML5 Canvasで2次ベジェ曲線を描く方法を徹底解説

HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、図形の描画からゲーム、データの可視化まで幅広い用途に活用されています。

canvas要素にはgetContextというDOMメソッドが用意されており、これを呼び出すことでレンダリングコンテキストとその描画機能を取得できます。このメソッドは引数としてコンテキストの種類を1つ受け取り、2D描画を行う場合は「2d」を指定します。

quadraticCurveTo()メソッドとは

HTML5 Canvasで2次曲線（2次ベジェ曲線）を描くには、quadraticCurveTo()メソッドを使用します。

このメソッドは、指定した点を現在のパスに追加し、その点と直前の点を、指定した制御点を通る2次ベジェ曲線で結びます。滑らかなカーブを表現したい場合に非常に便利なメソッドです。

パラメータの意味

  • cpx / cpy：制御点のX座標・Y座標（カーブの弯曲の度合いを決める）
  • x / y：終点のX座標・Y座標

サンプルコード

以下のコードを実行すると、HTML5 Canvas上に2次曲線を組み合わせた図形を描画できます。複数のquadraticCurveTo()をつなげることで、複雑な曲線も自由自在に表現可能です。

<!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');

         // 図形を描画
         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>

実行結果

このコードを実行すると、キャンバス上に複数の2次ベジェ曲線を組み合わせた、なめらかな輪郭を持つ図形が黒い線で描画されます。moveTo()で始点を決め、その後連続してquadraticCurveTo()を呼び出すことで、各セグメントが滑らかにつながった曲線になります。

ポイントまとめ

  • beginPath()で新しいパスを開始する
  • moveTo(x, y)で描画の始点を指定する
  • quadraticCurveTo(cpx, cpy, x, y)で制御点と終点を指定して曲線を追加する
  • stroke()でパスを実際に描画する

制御点の位置を変えることでカーブの形状を自在に調整できるので、いろいろな値を試しながら感覚をつかんでみてください。

  1. HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：

  2. HTML Canvasでベジェ曲線を描画する方法

    HTMLのCanvasでベジェ曲線を描画するには、bezierCurveTo()メソッドを使用します。このメソッドでは、2つの制御点と終点を指定することで、滑らかで自由度の高い曲線を描くことができます。bezierCurveTo()メソッドの構文ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);パラメータの説明cp1x … 1つ目のベジェ制御点のX座標cp1y … 1つ目のベジェ制御点のY座標cp2x … 2つ目のベジェ制御点のX座標cp2y … 2つ目のベジェ制御点のY座標x … 終点のX座標y … 終点のY座標制御点の位置を変えることで、曲線の