■補講　自前でベジエ曲線を描く
　本書の7章のCanvasではいくつかの描画メソッドについて解説しました。その中に曲線を描くメソッドがありました。曲線には本文で取り上げたベジエ曲線だけでなくスプライン曲線など様々なものがあります。
　ここでは、計算式に基づいて自前でベジエ曲線を描いてみましょう。


------------------------------------------------------------------------------------------------
■直線をつなげて曲線にする
　ベジエ曲線は以下の図のような計算式で示されます。

【図】fig1.pdf

　この計算式に基づいて曲線を描きます。ところで、曲線はどうやって描いていけばよいのでしょうか？　1つずつ点を描画していけばよいのでしょうか？
曲線を描く場合には座標点ごと直線で結んでいきます。つまり細かい直線をつなげることで曲線に見せていることになります。
　実際にベジエ曲線を描くプログラムが以下のものになります。ベジエ曲線は上図のtの値を変化させることで曲線を描きます。このtの値の変化を小さくすると、よりなめらかな曲線に、大きくするとカクカクした曲線になります。
　実際に試してみましょう。以下のプログラムでは細かさを以下の行で指定しています。

var step = 0.04;	// 分割数

　stepを1にすると分割数が1つになってしまいます。上記の場合は1÷0.04 = 25で25分割されています。16分割くらいでだいたい、なめらかな曲線になります。あまり細かくしても意味はないでしょう。
　この分割数の値を変えてベジエ曲線が、どのように変わるか見てみてください。


＊PDFなどで使われているPostScript言語では確かflatnessの値で曲線分割数を指定できたと思います。また、Adobe Illustrator 88 (1988年のバージョン)や3.0までは、曲線分割数を指定する欄がありました。


------------------------------------------------------------------------------------------------
■ベジエ曲線を自前で描くプログラム
------------------------------------------------------------------------------------------------
window.addEventListener("load", function(){
	var canvasObj = document.getElementsByTagName("canvas")[0];
	var context = canvasObj.getContext("2d");
	if (!context){ return; }
	context.strokeStyle = "red";
	context.lineWidth = 2;
	bezier(context, 0,0, 20,80, 90,170, 190,0);

	// 指定された座標にベジエ曲線を描く
	function bezier(context, x1,y1,x2,y2,x3,y3,x4,y4){
		context.beginPath();
		var step = 0.04;	// 分割数
		for(var t=0; t<=1+step; t+=step){
			var b1 = Math.pow((1-t), 3);
			var b2 = 3*t*(Math.pow((1-t), 2));
			var b3 = 3*Math.pow(t,2)*(1-t);
			var b4 = Math.pow(t, 3);
			var bx2 = b1*x1 + b2*x2 + b3*x3 + b4*x4;
			var by2 = b1*y1 + b2*y2 + b3*y3 + b4*y4;
			if (t == 0){
				var bx1 = bx2;
				var by1 = by2;
			}
			context.moveTo(bx1, by1);
			context.lineTo(bx2, by2);
			bx1 = bx2;
			by1 = by2;
		}
		context.closePath();
		context.stroke();
	}
}, true);