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

HTML5 SVGで正弦波を描く方法！3次ベジェ曲線による高精度な近似テクニック

SVGには正弦波（サインカーブ）を直接描画する専用の命令は用意されていません。しかし、<path>要素と3次ベジェ曲線（cubic Bézier）を組み合わせることで、正弦波の半周期を極めて精度よく近似できます。この手法のポイントは、制御点の座標に係数「36.42」と「70.58」を使うことです。

正弦波を近似する仕組み

正弦波 y = sin(x) の半周期（0〜π）をベジェ曲線で表現する場合、パスデータは次の構成になります。

  • M0,0 … 始点を座標 (0, 0) に移動する
  • C36.42,0 70.58,100 100,100 … 2つの制御点と終点を指定して3次ベジェ曲線を描画する

制御点のオフセット値「36.42」は、数学的に正弦波との誤差が最小になるよう導かれた有名な近似係数です。この値を使うことで、目視では本物の正弦波とほぼ見分けがつかない、滑らかなカーブを実現できます。

コード例

<!DOCTYPE html>
<html>
   <head>
      <title>SVG</title>
      <meta charset="utf-8"/>
   </head>
   <body>
      <h2 align="center">HTML5 SVG Sine Waves</h2>
      <svg width="150px" height="200px" viewBox="0 0 100 100">
         <path stroke="#00FF00" fill="none" d="M0,0 C36.42,0,70.58,100,100,100"/>
      </svg>
   </body>
</html>

実行結果

上記のコードをブラウザで表示すると、緑色（#00FF00）で描かれた滑らかな半周期の正弦波が確認できます。stroke属性を変更すれば、好きな色や線幅に調整することも可能です。

HTML5 SVGで正弦波を描く方法！3次ベジェ曲線による高精度な近似テクニック

応用：完全な波形（1周期）を描くには

フルの正弦波を表示したい場合は、この半周期カーブを上下反転させながら連結していきます。2つ目以降の半周期では制御点のY座標を入れ替えるだけでよく、これを繰り返すことで山と谷が交互に続く、自然な正弦波を簡単に作成できます。


  1. HTML5のarc()メソッドで円を描く方法をわかりやすく解説

    HTML5では、<canvas>要素とarc()メソッドを組み合わせることで、簡単に円を描くことができます。完全な円を描きたい場合は、開始角度を「0」、終了角度を「2 * Math.PI」に指定するのがポイントです。 arc()メソッドのパラメータ一覧 arc()メソッドには、以下の6つのパラメータを渡します。 No.パラメータ説明 1x円の中心のx座標 2y円の中心のy座標 3r円の半径 4startingAngle描画開始の角度（ラジアン単位） 5endingAngle描画終了の角度（ラジアン単位） 6counterclockwise（true / false）反時計回りに

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

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