fillRect()メソッド

CanvasRenderingContext2D fillRect()メソッド

概要

 状態:-  閲覧数:725  投稿日:2014-03-13  更新日:2017-08-19  
塗りつぶした矩形を描画
・canvas 上の指定矩形を、現在の塗りつぶしスタイル(fillStyle)で、塗りつぶす
※色を指定していない状態で、塗りつぶし四角形を描くと、黒色で描画される

・fillRect() メソッド で描かれる矩形はパスではない。そのため、beginPath() メソッドを呼び出す必要はない
・w(幅)かh(高さ)のいずれかが 0 なら、このメソッドは何も作用しない

構文
CanvasRenderingContext2Dオブジェクト.fillRect(x, y, w, h);

引数
第1引数x … 開始位置x座標
第2引数y … 開始位置y座標
第3引数w … 幅width
第4引数h … 高さheight


処理の流れ


1.fillStyleプロパティで塗り潰す色を設定
2.fillRect() メソッドで実際に塗り潰す

遭遇例 / 確認例

 閲覧数:258 投稿日:2015-11-23 更新日:2015-11-25 

遭遇例


▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>


▼render.js
    var COL = 8;
   var RECT_CANV = {
       x: 0,
       y: 0,
       w: 500,
       h: 500
   };

var CELL_SIZE = RECT_CANV.w / COL | 0;

var ctx = document.getElementById("canv").getContext('2d');


       for (var x = 0; x < COL; x++) {
           for (var y = 0; y < COL; y++) {
               ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
           }
       }



確認例


デフォルト(色指定なし)
黒色で塗る
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>

<script>
var COL = 8;
var RECT_CANV = {
  x: 0,
  y: 0,
  w: 500,
  h: 500
};

var CELL_SIZE = RECT_CANV.w / COL | 0;

var ctx = document.getElementById("canv").getContext('2d');

for (var x = 0; x < COL; x++) {
   for (var y = 0; y < COL; y++) {
       ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
   }
}
</script>



コメント投稿(ログインが必要)