Canvasによるグラフィック描画(2) (4/7)
作成:2010-07-15 20:45
更新:2010-07-15 20:45
更新:2010-07-15 20:45
■座標変換でパス図形を描く
四角形なら、座標軸変換で描画するのは簡単です。が、パスを使った図形だと、意外に描画は面倒です。なぜなら、パスによる図形は、座標軸変換を適用したあとでパスを作成しないといえけないからです。あらかじめパスを用意しておき、「座標軸変化しては描画」というのを繰り返しても図形は変形しないのです。
ではどうすればいいのか。これは、図形のパスを作成する関数を用意しておき、座標変換を行ないながらそれを呼び出す、という形で処理していくのが良いでしょう。以下に、簡単なサンプルをあげておきます。実行すると、五芒星の図形が回転しながら縮小して描かれていきます。（要するに、先ほどのサンプルの四角形が五芒星に変わっただけです）
ここでは、create5Starという関数を用意し、これを呼び出すことで五芒星のパスを作成するようになっています。そして、draw関数では、forによる繰り返しの中で、translate/scale/rotateを呼び出してはcreate5Starを実行し、fillする、ということを繰り返しています。
見ればわかるように、create5Starで作成されるパスは常に同じものです。同じ位置、同じ形、同じ大きさです。が、座標軸が変化しながら描かれていくため、図形は少しつづ位置や大きさ、回転角度を変えながら描かれていくのです。
このように座標変換は非常に便利ではありますが、そうなると「何度も変換を繰り返していくうちに、元に戻せなくなった」なんて自体にも遭遇することになるでしょう。このような場合には、「save」と「restore」を利用することができます。
「save」は、現在のコンテキストの状態を保存し、「restore」は最後に保存したコンテキストの状態に戻すものです。座標変換をするときは、まずsaveで保存しておき、座標変換して描画をしたらrestoreで元に戻す、というやり方で描画をしていけばよいのです。こうすれば、描画後に再び初期状態の座標軸に戻りますから、途中でわけがわからなくなってくることもありません。座標変換のテクニックとして覚えておくとよいでしょう。
ではどうすればいいのか。これは、図形のパスを作成する関数を用意しておき、座標変換を行ないながらそれを呼び出す、という形で処理していくのが良いでしょう。以下に、簡単なサンプルをあげておきます。実行すると、五芒星の図形が回転しながら縮小して描かれていきます。（要するに、先ほどのサンプルの四角形が五芒星に変わっただけです）
ここでは、create5Starという関数を用意し、これを呼び出すことで五芒星のパスを作成するようになっています。そして、draw関数では、forによる繰り返しの中で、translate/scale/rotateを呼び出してはcreate5Starを実行し、fillする、ということを繰り返しています。
見ればわかるように、create5Starで作成されるパスは常に同じものです。同じ位置、同じ形、同じ大きさです。が、座標軸が変化しながら描かれていくため、図形は少しつづ位置や大きさ、回転角度を変えながら描かれていくのです。
このように座標変換は非常に便利ではありますが、そうなると「何度も変換を繰り返していくうちに、元に戻せなくなった」なんて自体にも遭遇することになるでしょう。このような場合には、「save」と「restore」を利用することができます。
「save」は、現在のコンテキストの状態を保存し、「restore」は最後に保存したコンテキストの状態に戻すものです。座標変換をするときは、まずsaveで保存しておき、座標変換して描画をしたらrestoreで元に戻す、というやり方で描画をしていけばよいのです。こうすれば、描画後に再び初期状態の座標軸に戻りますから、途中でわけがわからなくなってくることもありません。座標変換のテクニックとして覚えておくとよいでしょう。
(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);
// 描画
context.translate(200,50);
for(var i = 0;i < 50;i++){
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI / 10);
create5Star(context);
context.fill();
}
}
function create5Star(context){
var n = 0;
var dx = 100;
var dy = 0;
var s = 50;
// 図形の作成
context.beginPath();
context.fillStyle = 'rgba(255,0,0,0.5)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for(var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo( dx + x * s,dy + y * s);
}
context.closePath();
}
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る