Canvasによるグラフィック描画(1) (7/7)
作成:2010-07-15 17:01
更新:2010-07-15 17:02
更新:2010-07-15 17:02
■ベジエ曲線を描くbezierCurveTo
続いて、曲線の描画についてです。曲線の描画は、「bezierCurveTo」というメソッドを使います。これは、lineToの曲線版といったもので、現在の描画地点から指定の地点までの曲線をパスに追加します。これは以下のような形で呼び出します。
このように「２点の他に、曲線をコントロールするための２点をもつ曲線」を、「３次ベジエ曲線」といいます。これはコンピュータの世界で、なめらかな曲線を描くのに多用されるものです。アウトラインフォントなども、この３次ベジエ曲線として図形の形状を作成しています。
先程のサンプルを少し修正し、ベジエ曲線を使って図形を描くようにした例を下に上げておきましょう。実際にやってみると、先ほどの多芒星の各頂点をまとめて「びよ～ん」と引っ張ったような不思議な形になります。
このbezierCurveToも、最初に呼び出したときには、その位置から描画が開始されるようになります。
bezierCurveTo( CP1横位置, CP1縦位置, CP2横位置, CP2縦位置, 横位置, 縦位置 );ずいぶん引数が多いな、と思ったかも知れません。このbezierCurveToは、曲線を描くために３つの位置の情報を必要とします。現在の位置から次の位置までの間に、「コントロールポイント」とか「ハンドル」とか呼ばれる２つの制御点があり、これらの位置に応じて曲線の曲がり具合が決まるような仕組みになっているのです。
このように「２点の他に、曲線をコントロールするための２点をもつ曲線」を、「３次ベジエ曲線」といいます。これはコンピュータの世界で、なめらかな曲線を描くのに多用されるものです。アウトラインフォントなども、この３次ベジエ曲線として図形の形状を作成しています。
先程のサンプルを少し修正し、ベジエ曲線を使って図形を描くようにした例を下に上げておきましょう。実際にやってみると、先ほどの多芒星の各頂点をまとめて「びよ～ん」と引っ張ったような不思議な形になります。
このbezierCurveToも、最初に呼び出したときには、その位置から描画が開始されるようになります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.globalCompositeOperation = 'and';
context.fillStyle = 'rgb(100,255,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
context.moveTo(dx,dy);
for(var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.bezierCurveTo(
dx + x * s,dy + y * s - 100,
dx + x * s + 100,dy + y * s,
dx + x * s,dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る