四角形描画メソッドについて
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座標と
横幅
縦幅
となる