Canvasによるグラフィック描画(1) (4/7)
作成:2010-07-15 10:51
更新:2010-07-15 10:51
更新:2010-07-15 10:51
■パスを使って円を描く
では、四角形以外の描画はどうなっているのか。これは、ちょっとばかり面倒です。四角形以外は、今のように「図形を描くメソッドを呼び出すだけ、以上!」というようにはなっていません。
それ以外の図形は、「パス」というものを使って描画をするのです。コンテキストを取り出すまでは同じですが、それから後はこうなります。
1.パスの作成を開始する。
2.描きたい図形のパスを追加する。
3.パスが完成したら、パスを閉じて作成を終える。
4.スタイルなどを設定し、描画メソッドを呼び出してパスを描く。
つまり、「パスというのを使って図形の形状を作成する」「できあがったら色を設定して描く」というような手順になっているのですね。
では、実際に簡単なサンプルを作成してみましょう。下にscript.jsの例をあげておきます。これは、円を描く簡単なサンプルです。繰り返しを使い、半透明の円を少しずつ位置と大きさを変えながら描きます。
では、ここでのスクリプトを整理していきましょう。
1.パスの作成を開始する
2.円のパスを追加する
このarcは、実は真ん丸い円を描くためのものではなく、「円弧」を描くためのものなのです。ですから、「どこからどこまでの角度の円弧を描くか」ということも指定しないといけないんですね。それが「開始角度、終了角度」の指定です。角度は、ラジアン(円の1周を2Πとして換算する方式)で指定をします。また「描く方向」は、、開始位置から時計回りの場合はtrue、逆回りの場合はfalseとなります。
3.パスを閉じる
4.スタイルを設定し、描画をする
図形の描画は、「fill」「stroke」というメソッドを使います。これらは、それぞれ作成したパスの図形を「塗りつぶす」「輪郭線だけ描く」という働きをします。既に描く図形の位置や大きさはパスとして用意されてますので、メソッドには非キスなどは不要です。
このように、「パス」というものをいかにして作成するかがCanvasでの図形描画のポイントといってよいでしょう。ここではarcだけ利用しましたが、図形のパスを作るメソッドは他にもいろいろと用意されています。
それ以外の図形は、「パス」というものを使って描画をするのです。コンテキストを取り出すまでは同じですが、それから後はこうなります。
1.パスの作成を開始する。
2.描きたい図形のパスを追加する。
3.パスが完成したら、パスを閉じて作成を終える。
4.スタイルなどを設定し、描画メソッドを呼び出してパスを描く。
つまり、「パスというのを使って図形の形状を作成する」「できあがったら色を設定して描く」というような手順になっているのですね。
では、実際に簡単なサンプルを作成してみましょう。下にscript.jsの例をあげておきます。これは、円を描く簡単なサンプルです。繰り返しを使い、半透明の円を少しずつ位置と大きさを変えながら描きます。
では、ここでのスクリプトを整理していきましょう。
1.パスの作成を開始する
context.beginPath();パスの開始は「beginPath」で行ないます。これを呼び出すことで、明示的にパスの作成が開始されます。繰り返しなどのように何度もパスを作る場合は、beginPathすると(それまでのパスはクリアされ)新たにパスの作成を開始します。
2.円のパスを追加する
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);円のパスは「arc」というメソッドで作ります。これは、引数が多いので注意が必要です。「横位置、縦位置、半径、開始角度、終了角度、描く方向」といった引数を用意する必要があります。
このarcは、実は真ん丸い円を描くためのものではなく、「円弧」を描くためのものなのです。ですから、「どこからどこまでの角度の円弧を描くか」ということも指定しないといけないんですね。それが「開始角度、終了角度」の指定です。角度は、ラジアン(円の1周を2Πとして換算する方式)で指定をします。また「描く方向」は、、開始位置から時計回りの場合はtrue、逆回りの場合はfalseとなります。
3.パスを閉じる
context.closePath();パスができあがったら、「closePath」でパスを閉じ、パスの作成を終了します。この段階では、まだ(見えない)パスが出来上がっただけで、何も図形は描かれていません。
4.スタイルを設定し、描画をする
context.fillStyle = 'rgba(255, 0, 0, 0.25)';作成したパスを使って描画をします。スタイルの設定は、先ほどの四角形描画と同様に「fillStyle」「strokeStyle」を利用します。
context.fill();
図形の描画は、「fill」「stroke」というメソッドを使います。これらは、それぞれ作成したパスの図形を「塗りつぶす」「輪郭線だけ描く」という働きをします。既に描く図形の位置や大きさはパスとして用意されてますので、メソッドには非キスなどは不要です。
このように、「パス」というものをいかにして作成するかがCanvasでの図形描画のポイントといってよいでしょう。ここではarcだけ利用しましたが、図形のパスを作るメソッドは他にもいろいろと用意されています。
(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; for(var i = 0; i < 10; i++) { context.beginPath(); context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = 'rgba(255, 0, 0, 0.25)'; context.fill(); } }
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る