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

HTML5 Canvasでベジェ曲線を描く方法をわかりやすく解説

HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、図形の描画から動的なビジュアル表現まで幅広く活用できます。

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

bezierCurveTo()メソッドとは

HTML5 Canvasでベジェ曲線を描くには、bezierCurveTo()メソッドを使用します。このメソッドは、指定した点を現在のパスに追加し、直前の点と3次ベジェ曲線で結びます。2つの制御点（コントロールポイント）を指定することで、滑らかで自由な曲線を表現できるのが特徴です。

各パラメータの意味は以下のとおりです。

  • cp1x / cp1y：1つ目の制御点の座標
  • cp2x / cp2y：2つ目の制御点の座標
  • x / y：曲線の終点の座標

サンプルコード

次のコードを実行すると、HTML5 Canvas上にベジェ曲線を組み合わせてハート型の図形を描画できます。beginPath()でパスの開始を宣言し、moveTo()で始点を移動した後、複数のbezierCurveTo()を連続して呼び出すことで複雑な形状を作成しています。

<!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,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();
</script>

</body>
</html>

実行結果

上記のコードを実行すると、キャンバス内に塗りつぶされたハート型の曲線が表示されます。制御点の座標を変更すれば、曲線の膨らみや角度を自由に調整できるため、アイコンやチャート、カスタムイラストなどさまざまな用途に応用できます。

  1. HTML5のlineTo()メソッドで線を描画する方法

    HTML5のlineTo()メソッドで線を描画する方法HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。beginPath(): 新しいパスの作成を開始するmoveTo(): 線の始点となる座標を指定するlineTo(): 線の終点となる座標を指定するstroke(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ

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