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

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

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

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

サンプル

以下の黒い点がカレントポジション、制御点1、制御点2、終点を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="t1" width="320" 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.bezierCurveTo(100,100,200,10,300,100);
        ctx.stroke();
      }
    }
  </script>
</body>
</html>
ソースファイルのダウンロード(bezier3.zip)