FC2ブログ

四角形描画メソッドについて

四角形描画メソッドについて

rect()
fillrect()
strokeRect()
clearRect()

いずれもパラメータは同じ
左から順番に
x座標
y座標
横幅
縦幅

となる

strokeRect()は
四角形の枠だけ描画

fillRect()は
塗りつぶした四角形を描画する


まず、塗りつぶした四角形から
これはfillRect()を使う

まず最初に塗りつぶす色を決める
やり方は
コンテキストのfillStyleプロパティへ
カラー名やカラーコードを指定
ソースにす?と
context.fillStyle="black";

色が決まったら
fillRect()で四角形描画
全体を塗りつぶしたいなら
描画開始座標は
0,0
横幅は canvasObj.width
縦幅は canvasObj.height
これでok

ソースにすると
context.fillRect(0,0,canvasObj.width,canvasObj.height);

次は枠だけの四角形描画
これにはstrokeRect()を使う

fillRect()は塗りつぶす色だけど
strokeRect()は枠の色を決める

まぁ色を先に決めるのは変わらん

で、線の色の指定は
コンテキストのstrokeStyleプロパティへ
カラー名やカラーコードを指定
あと、枠なので、線の太さを指定する
これは
lineWidthで指定

ソースにすると
context.lineWidth=10;

単位はピクセル限定

ちなみに、細かく小数点で指定もできる
あとは
strokeRect()で描画する
引数は左から
開始のx,y座標と
横幅
縦幅 
となる
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック