Hyper Text Markup Language 5

曲線の描画

キャンバスにベジェ曲線（→Wikipedia）を描画します。ベジェ曲線は二次、三次のものが使用可能です。それぞれの引数は以下の通りです。それぞれの引数であるcpxとcpyは制御点を表わしています。

// 二次ベジェ曲線
	quadraticCurveTo(cp1x, cp1y, x, y);

// 三次ベジェ曲線
	bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

サンプル

サンプルは二次ベジェ曲線と三次ベジェ曲線を描いています。右上の図形は二次ベジェ曲線に補助線と制御点を加えたものです。二次ベジェ曲線はこの青い制御点を基準として、指定された座標(x, y)まで曲線を描いていきます。

// 二次ベジェ曲線の描画（左上）
	cx.beginPath();
	cx.moveTo(60, 40);
	cx.quadraticCurveTo(100, 140, 140, 40);
	cx.stroke();

// 二次ベジェ曲線に補助線と制御点を加えたもの（右上）
	cx.beginPath();
	cx.moveTo(180, 40);
	cx.quadraticCurveTo(220, 140, 260, 40);
	cx.stroke();
// 補助線の描画
	cx.beginPath();
	cx.moveTo(180, 40);
	cx.lineTo(220, 140);
	cx.lineTo(260, 40);
	cx.strokeStyle = "rgb(256, 100, 100)";
	cx.stroke();
// 制御点の描画
	cx.beginPath();	
	cx.moveTo(220, 140);
	cx.arc(220, 140, 5, 0, 2*Math.PI, false);
	cx.fillStyle = "rgb(100, 100, 256)";
	cx.fill();

// 三次ベジェ曲線の描画
	cx.beginPath();
	cx.moveTo(60, 200);
	cx.bezierCurveTo(120, 300, 160, 100, 230, 200);
	cx.stroke();