PR

簡単な図を描いてみよう!

2008年5月8日(木)
羽田野 太巳

円を描く前の基礎知識

前ページでは直線を描き、それを組み合わせることでさまざまな多角形が描けることを学んできました。ここでは、円を描く方法を学んでいきましょう。

Canvasで円を描くには、arcメソッドを使います。まずはサンプルを見てみましょう(リスト3)。このサンプルでは、円および円弧を3つ描いています。1つ目は完全な円を、2つ目に円弧を、3つ目には円弧の空いた部分を直線で閉じた図です。


画像をクリックすると拡大します

まずは、円弧を描くためのarcメソッドの使い方を見ていきましょう。arcメソッドには以下の順番で6つの引数を与えます。

  1. 円の中心のx座標。
  2. 円の中心のy座標。
  3. 円の半径。
  4. 円弧を描き始める角度。x軸の向き(右方向)から見て右回りの角度をラジアンで指定。
  5. 円弧を描き終える角度。x軸の向き(右方向)から見て右回りの角度ラジアンで指定。
  6. 円弧を描く向きを真偽値で指定。trueを指定すると反時計回り(左回り)に、falseを指定すると時計回り(右回り)で円弧を描きます。

arcで指定する角度の単位はラジアンですので注意してください。ラジアンという単位に馴染みがないかもしれませんが、度の単位から簡単に変換できますので、安心しください。もし45度をラジアンで表す場合は、45*Math.PI/180となります。このように45の値を変えれば、どんな角度でもラジアンの単位の値となります。

たとえば、360度の場合は「Math.PI*2」、180度の場合はMath.PIとなります。では、以降、各サンプルを詳しく見ていきましょう。

円を描く

「ctx.arc(75, 75, 50, 0, Math.PI*2, false);」は、中心の座標が(75, 75)で、半径が50で、0ラジアン(右位置)からMath.PI*2ラジアンの位置まで時計回りに円弧を描くことを表しています。Math.PI*2ラジアン(360度)は、0ラジアンの位置と同じですから、結果的に円を描くことになります。

「ctx.arc(225, 75, 50, -10*Math.PI/180, -80*Math.PI/180 , false);」は、中心座標が(225, 75)で、半径が50で、-10度の位置から-80度の位置まで時計回りで円弧を描くことを表しています。

円弧を描く向きには注意してください。開始角度と終了角度が同じでも、円弧を描く向きが反対だと、描かれる円弧も異なってきます。サンプルではfalse(時計回り)ですが、もしtrue(反時計回り)を指定すると、サンプルでは開いている部分(描かれてない部分の円弧)が描かれることになります。

先ほど描いた円弧で、開いている部分を直線で結んで、図形を閉じるにはどうすれば良いでしょうか。

arcメソッドで円弧を定義してから、lintToメソッドで円弧の開始点の座標を指定すれば図形が閉じられそうですね。しかし、円弧の開始点の座標がすぐに計算できますか? 学生時代の数学の教科書を引っ張り出さなくてはいけませんね。

Canvasでは、このような状況において、closePath()というとても便利なメソッドが用意されています。

リスト3の15行目「ctx.arc(375, 75, 50, -10*Math.PI/180, -80*Math.PI/180 , false);」と16行目「ctx.closePath();」のようにarcメソッドで円弧を定義した後、closePathメソッドを呼び出すだけで、パスの開始点(この場合は円弧の開始点)に向けて自動的に直線を定義してくれます。円弧だけではなく、直線の組み合わせなどでもclosePathメソッドが利用できます。

もちろん、円弧の開始座標を計算してlineToメソッドで円弧を閉じることも可能です。しかしコードが見づらくなるだけではなく、毎回計算式を考えなければいけないので、図形を直線で閉じたい場合は積極的にclosePathメソッドを使うのが良いでしょう。

有限会社futomi
代表取締役。CGI/Perl総合サイト「futomi\'s CGI Cafe」を運営。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。主にPerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。http://www.futomi.com/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

簡単な図を描いてみよう! | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。