Canvasによるグラフィック描画 (3/5)

では、図形の描画メソッドにはどのようなものがあるのでしょうか。ここで主なものをまとめておきましょう。


・直線の描画

《GraphicsContext》.strokeLine
    ( 開始横位置 , 開始縦位置 ,
      終了横位置 , 終了縦位置 );

２点を結ぶ直線を描くためのものです。引数には、線の開始地点と終了地点を指定します。

・四角形の描画

《GraphicsContext》.fillRectangle( 横位置 , 縦位置 , 横幅 , 高さ );
《GraphicsContext》.strokeRect( 横位置 , 縦位置 , 横幅 , 高さ );

四角形を描画するためのものです。fillRectangleは塗りつぶした四角形、strokeRectangleは輪郭線だけを描きます。引数にはそれぞれ図形の右上の位置と、縦横の幅を指定します。


・角の丸い四角形の描画

《GraphicsContext》.fillRoundRectangle( 横位置 , 縦位置 , 
    横幅 , 高さ , 角の横幅 , 角の高さ );
《GraphicsContext》.stokeRoundRectangle( 横位置 , 縦位置 , 
    横幅 , 高さ , 角の横幅 , 角の高さ );

角の部分が丸くなった四角形を描くためのものです。引数には位置と大きさの値に加え、角の部分の縦横幅を用意します。


・楕円の描画

《GraphicsContext》.fillOval( 横位置 , 縦位置 , 横幅 , 高さ );
《GraphicsContext》.strokeOval( 横位置 , 縦位置 , 横幅 , 高さ );

楕円を描くものです。基本的には四角形の描画と同じで、描く楕円の位置（右上の位置）と縦横幅を指定します。


・円弧の描画

《GraphicsContext》.fillArc( 横位置 , 縦位置 , 横半径 , 縦半径 , 
    開始角度 , 長さ , タイプ );
《GraphicsContext》.stokeArc( 横位置 , 縦位置 , 横半径 , 縦半径 , 
    開始角度 , 長さ , タイプ );

円弧を描くためのものです。位置と大きさの他に、その円の開始地点と長さ、タイプに関する値を指定します。タイプは描かれる円弧の図形の形に関するものです。これはArcTypeという列挙型（Enum）の値を使って指定します。用意されている値は以下のものです。

CHORD――円弧の両端を直線で結んだ形の図形を描きます。
OPEN――円弧の両端を結ばず、開いた図形として描きます（内部は塗りつぶさない）。
ROUND――円弧の両端と円の中心を直線で結んだ形の図形を描きます。


・多角形の描画

《GraphicsContext》.fillPolyline( 横位置の配列 , 縦位置の配列 , 頂点数 );
《GraphicsContext》.stokePolyline( 横位置の配列 , 縦位置の配列 , 頂点数 );
《GraphicsContext》.fillPolygon( 横位置の配列 , 縦位置の配列 , 頂点数 );
《GraphicsContext》.stokePolygon( 横位置の配列 , 縦位置の配列 , 頂点数 );

複数の頂点を結んだ多角形を描くためのものです。引数は、各頂点の横位置と縦位置をそれぞれ別々にdouble配列にまとめたものと頂点の数を指定します。○○Polylineと、○○Polygonという2種類のものがありますが、前者は閉じていない図形、後者は閉じた図形（開始地点と終了地点がつながっている）を描くものです。


・テキストの描画

《GraphicsContext》.fillText( 描画テキスト , 横位置 , 縦位置 );
《GraphicsContext》.stokeText( 描画テキスト , 横位置 , 縦位置 );

テキストを指定の位置に描画します。描画するテキストと描画位置位置の値を指定します。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。