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

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座標

制御点の位置を変えることで、曲線の膨らみ方や方向を自由に調整できます。まずは基本的な使用例を見てみましょう。

サンプルコード

<!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>

このコードでは、まずmoveTo(50, 20)で描画開始点を設定し、その後bezierCurveTo()によって2つの制御点(100, 150)と(200, 100)を経由するような曲線を、終点(200, 50)まで描画しています。最後にstroke()を呼び出すことで、実際に線が描かれます。

実行結果

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

実行すると、青い枠線のキャンバス上に、なめらかなカーブが描画されます。制御点の座標をいろいろと変更して試すことで、ベジェ曲線の挙動をより深く理解できるでしょう。

  1. HTMLキャンバスのstroke()メソッドとは？使い方とサンプルコードを解説

    HTMLキャンバスのstroke()メソッドは、定義されたパス（軌跡）を実際に描画するためのメソッドです。パスそのものはmoveTo()やlineTo()などのメソッドで定義しますが、この段階ではまだ画面には表示されません。stroke()を呼び出すことで、はじめて線として描き出されます。<canvas>要素の基本<canvas>要素を使うと、JavaScriptを通じてWebページ上に図形やグラフィックを自由に描画できます。canvas要素には、描画領域のサイズを指定する2つの属性があります。width：キャンバスの幅を指定height：キャンバスの高さを指定stro

  2. HTML Canvasの基本を解説!図形や曲線を描画する方法

    Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。canvas要素の基本的な設定すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。<canvas id = ne