Canvasによるグラフィック描画(1) (6/7)
作成:2010-07-15 16:34
更新:2010-07-15 16:34
更新:2010-07-15 16:34
■moveToとlineTo
では、arc以外のパス作成メソッドについても見てみましょう。まずは、直線の描画からです。
直線の線分描画は、「moveTo」と「lineTo」を用いるのが一般的です。これは以下のような働きをします。
moveTo( 横, 縦 ); 指定した位置に描画の開始地点を移動します。
lineTo( 横, 縦 ); 現在の位置から指定した位置まで線分を描画します。描画の開始地点は描き終わった場所に移動します。
パスの作成を行うとき、頭に入れておきたいのが「描画の開始地点」についてです。パスの作成は、ちょうどペンなどで線を描いていくのと同じように、「ある地点から描き始め、指定した地点で描き終わる」というように「描く地点」の情報を元にパスを作成していきます。
ですから、ある図形を描くときには、「描き始めの場所まで描画位置を移動する」「その場所から次の場所までパスを作成する」「そこからまた次の場所までパスを作る」「そこからまた次の場所まで……」というようにして、現在の場所から次の場所へとパスを描き足していく形で追加していくのです。
この特性を頭に入れておくと、複雑な図形も描けるようになります。例として、直線を組み合わせた図形のサンプルをあげておきましょう。これは三角関数を使って頂点の位置を計算し、lineToを繰り返し呼び出して描画しています。
実際にやってみると分かりますが、初めてlineToを呼びだすと、描画はその場所から開始されるようになります。またパスを閉じてfillすると、自動的に開始位置と終了位置がつながれ、閉じた図形になります。fillは閉じた図形でないと塗りつぶせませんから。
直線の線分描画は、「moveTo」と「lineTo」を用いるのが一般的です。これは以下のような働きをします。
moveTo( 横, 縦 ); 指定した位置に描画の開始地点を移動します。
lineTo( 横, 縦 ); 現在の位置から指定した位置まで線分を描画します。描画の開始地点は描き終わった場所に移動します。
パスの作成を行うとき、頭に入れておきたいのが「描画の開始地点」についてです。パスの作成は、ちょうどペンなどで線を描いていくのと同じように、「ある地点から描き始め、指定した地点で描き終わる」というように「描く地点」の情報を元にパスを作成していきます。
ですから、ある図形を描くときには、「描き始めの場所まで描画位置を移動する」「その場所から次の場所までパスを作成する」「そこからまた次の場所までパスを作る」「そこからまた次の場所まで……」というようにして、現在の場所から次の場所へとパスを描き足していく形で追加していくのです。
この特性を頭に入れておくと、複雑な図形も描けるようになります。例として、直線を組み合わせた図形のサンプルをあげておきましょう。これは三角関数を使って頂点の位置を計算し、lineToを繰り返し呼び出して描画しています。
実際にやってみると分かりますが、初めてlineToを呼びだすと、描画はその場所から開始されるようになります。またパスを閉じてfillすると、自動的に開始位置と終了位置がつながれ、閉じた図形になります。fillは閉じた図形でないと塗りつぶせませんから。
(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.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for(var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo( dx + x * s,dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る