Canvasに長方形・四角形を描く方法として、デフォルトでいくつかのメソッドが用意されています。ここではそのうち一色で塗り潰した四角を描くfillRectメソッドに言及しています。
fillRectメソッドの使い方
Canvas領域の作り方のほうでも言及しましたが、改めて。
塗りつぶした四角形を描画
fillRect(x,y,w,h);
x=始点（横） y=始点（縦） w=width h=height
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は色以外も変更できるが、ここでは簡易的に色のみの変更とする
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系の記事まとめです。
sunagitsune.com
2019.02.23
コメント