fc2ブログ

記事一覧

Canvasによる三角形、四角形、円の描写

今回はCanvasを用いて三角形、四角形、円を描写しました。



まずは三角形の描写についてです。
単純にパスを三つ結べば三角形になりますが、どのようにパスを結べばいいのかは具体的に下記のようになります。
ctは今回のコテンテキストの名前です。

ct.beginPath();
ct.moveTo(x,y);
ct.lineTo(x+a,x+b);
ct.lineTo(x+a+c,y+b+d);
ct.closePath();
ct.stroke();

ここで(x,y)はcanvas要素の左上の隅を基準として、そこから横x、縦yの位置から描写を行う事を意味します。

それぞれ
・beginPath(); パスを初期化
・moveTo(x,y); (x,y)の位置から描写を開始
・lineTo(x+a,x+b); (x,y)の位置から(x+a,x+b)まで一本目のパスを引く
・lineTo(x+a+c,y+b+d); (x+a,x+b)の位置から(x+a+c,y+b+d)まで二本目のパスを引く
・closePath(); (x+a+c,y+b+d)の位置か描写開始の位置である(x,y)まで三本目のパスを引く
・stroke(); パスの軌跡のみを描写する
となります。

closePath()は描写を開始した位置までパスを引くメソッドです。

stroke()はパスの軌跡のみで輪郭を描写するメソッドですが輪郭の中を塗りつぶすfill()メソッドもあります。



次に四角形の描写についてです。
四角形はCanvasにおいて描写のためのメソッドがあります。
メソッドは以下の三つが用意されています。

strokeRect(x,y,a,b);
fillRect(x,y,a,b);
clearRect(x,y,a,b);

ここで(x,y)は先ほどと同様にcanvas要素の左上の隅を基準としてそこから横x、縦yの位置から描写を行う事を意味します。
ここでの(a,b)は(x,y)の位置から幅a,高さbの四角形を描写することを意味します。

strokeRect(x,y,a,b);
これは四角形を輪郭のみで塗りつぶさずに描写します。

fillRect(x,y,a,b);
これは塗りつぶした四角形を描写します。

clearRect(x,y,a,b);
これは四角形の形に描写をくり抜きます。

四角形の描写は描写の基点と幅と高さのみで決まるのでbeginPath()やclosePath()を行う必要はありません。



次に円の描写です。
円も四角形同様メソッドが用意されていますが実際にパスを引くメソッドですのでbeginPath()やclosePath()、stroke()、fill()は必要です。
メソッドは

arc(x,y,radius,startAngle,endAngle,anticlockwise);

このようになっています。

ここで(x,y)は円の中心です。
radiusは円の半径です。
startAngleは円の描写の始めの角度となっていて、endAngleは円の描写の終わりの角度となっています。ここでの角度はラジアンです。
anticlockwiseは円の描写を時計回りか反時計回りにするかを決めます。trueで反時計回り、falseで時計回りです。

またarc()メソッドはパスを引くメソッドですがそれは円周のパスのみです。
円の中心から線を引く扇形を描写したいときはmoveTo()メソッドを用いれば中心からパスが引けます。
スポンサーサイト



コメント

コメントの投稿

非公開コメント

プロフィール

memomemoprobe1

Author:memomemoprobe1
FC2ブログへようこそ!

カウンター