JavaScriptでCanvasに塗り潰した長方形(矩形)を描く・色を変える方法/fillRectメソッド・fillStyleプロパティの使い方

color IT

Canvasに長方形・四角形を描く方法として、デフォルトでいくつかのメソッドが用意されています。ここではそのうち一色で塗り潰した四角を描くfillRectメソッドに言及しています。

スポンサーリンク

fillRectメソッドの使い方

Canvas領域の作り方のほうでも言及しましたが、改めて。

塗りつぶした四角形を描画
fillRect(x,y,w,h);
x=始点(横) y=始点(縦) w=width h=height

実際動かしてみるとわかりやすいかな、と思うので作りました。ちなみに↓にcanvas作ってますが、「代替コンテンツ」と表示されてるようならお使いのブラウザがcanvas未対応ですので、別のブラウザでお試しください。
代替コンテンツ




widthまたはheightどちらかが0の場合は何も描画されません。またcanvasが小さ過ぎるとうまく動かないようです。

<!-- html -->
<canvas id="testcanvas"></canvas>

//JavaScript
function canvasClick1() {
var cvs = document.getElementById('testcanvas');
var byouga = cvs.getContext('2d');
byouga.fillRect(0, 0, 30, 30);
}

塗り潰しの色を変えたい

色を変える場合には、fillStyleプロパティを変更します。

塗り潰しの色を変更
fillstyle = “色”;
※正確にはfillStyleは色以外も変更できるが、ここでは簡易的に色のみの変更とする

代替コンテンツ
   

//赤
//JavaScript
function canvasClickaka() {
var cvs = document.getElementById('testcanvas2');
var byouga = cvs.getContext('2d');
byouga.fillStyle = "red";
byouga.fillRect(50, 50, 70, 70);
}

fillRectおよびfillStyleについては以上です。

JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント