Canvasによる二次ベジェ曲線の描画サンプル

icon 項目のみ表示/展開表示の切り替え

Canvasによる二次ベジェ曲線の描画サンプル

context.quadraticCurveTo(x1,y1,x2,y2)
カレントポジションを始点(x0,y0)、制御点(x1,y1)、終点(x2,y2)とする二次ベジェ曲線を描画します。
2次ベジェ曲線は、2点の始終点と制御点より曲線を表現する方法で以下の式で表すことができます。
x(t)=(1-t)^2 \times x0+ 2(1-t)^2 t \times x1+t^2 \times x2
y(t)=(1-t)^2 \times y0+ 2(1-t)^2 t \times y1+t^2 \times y2
0 \leqq t \leqq 1

サンプル

以下に黒い点が左から始点、制御点、終点を表します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="t1" width="220" height="120">
  </canvas>
  <script type="text/javascript">
    window.onload = function(){
      var canvas = document.getElementById('t1');
      if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.moveTo(10,10);
        ctx.quadraticCurveTo(100,100,200,10);
        ctx.stroke();
      }
    }
  </script>
</body>
</html>
ソースファイルのダウンロード(bezier2.zip)