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

HTML5 Canvasでベジェ曲線を描く方法｜bezierCurveTo()メソッドの使い方

HTML5のCanvasでベジェ曲線を描画するには、bezierCurveTo()メソッドを使用します。このメソッドは、2つの制御点と1つの終点を指定することで、なめらかで複雑な曲線を自由に表現できる強力な描画機能です。

bezierCurveTo()メソッドとは

bezierCurveTo()は3次ベジェ曲線（キュービックベジェ）を描くためのメソッドで、以下の6つの引数を受け取ります。

  • cp1x, cp1y：最初の制御点の座標
  • cp2x, cp2y：2番目の制御点の座標
  • x, y：曲線の終点の座標

制御点の位置によって曲線の膨らみや方向が変化するため、ハートマークのような複雑な図形も、複数のbezierCurveTo()を組み合わせることで描けます。

サンプルコード

以下のコードでは、Canvasを使ってハート型のベジェ曲線を描画しています。ブラウザでそのまま実行して動作を確認できます。

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script>
         function drawShape(){

            // DOMからcanvas要素を取得
            var canvas = document.getElementById('mycanvas');

            // canvasがサポートされていない場合は実行しない
            if (canvas.getContext){

               // 描画用に2Dコンテキストを取得
               var ctx = canvas.getContext('2d');
               ctx.beginPath();
               ctx.moveTo(75,40);
               ctx.bezierCurveTo(75,37,70,25,50,25);
               ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
               ctx.bezierCurveTo(20,80,40,102,75,120);
               ctx.bezierCurveTo(110,102,130,80,130,62.5);
               ctx.bezierCurveTo(130,62.5,130,25,100,25);
               ctx.bezierCurveTo(85,25,75,37,75,40);
               ctx.fill();
            } else {
               alert('このデモを見るには Safari または Firefox 1.5 以降が必要です。');
            }
         }
      </script>
   </head>
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

コードのポイント解説

  • getContext('2d')：Canvasの2D描画コンテキストを取得し、図形描画を可能にします。
  • beginPath()：新しいパスを開始し、以降の描画命令をひとまとまりのパスとして扱います。
  • moveTo(75, 40)：パスの開始点（ペンの起点）を設定します。
  • bezierCurveTo()：連続して呼び出すことで、前の終点を次の始点として滑らかな曲線をつなげていきます。
  • fill()：構築したパスで囲まれた領域を塗りつぶします。

実行結果

上記のコードを実行すると、Canvas上に塗りつぶされたハート型のベジェ曲線が表示されます。

HTML5 Canvasでベジェ曲線を描く方法｜bezierCurveTo()メソッドの使い方

制御点の座標値を変更しながら試すことで、ベジェ曲線の挙動への理解が深まります。ぜひ実際にコードを書き換えて、さまざまな曲線を描いてみてください。

  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座標制御点の位置を変えることで、曲線の