fillRect()メソッド

CanvasRenderingContext2D ＞ fillRect()メソッド

概要

　状態:- 　閲覧数:938 　投稿日: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() メソッドで実際に塗り潰す

遭遇例 ／ 確認例

　閲覧数:398　投稿日: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>


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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 fillRect()メソッド 93
2 fillText()メソッド 79
3 clearRect()メソッド 76
4 rect()メソッド 75
5 fill()メソッド 75
6 clear()メソッド 72
7 scale()メソッド 72
8 lineTo()メソッド 69
9 clearDepth()メソッド 67
10 strokeRect() メソッド 65
11 createBuffer()メソッド 63
12 beginPath()メソッド 62
13 arc()メソッド 61
14 compileShader()メソッド 61
15 translate() メソッド 60
16 clearColor()メソッド 60
17 bindBuffer()メソッド 60
18 bufferData()メソッド 60
19 setItem()メソッド 59
20 getItem()メソッド 59
2025/2/05 13:09 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 clearRect()メソッド | CanvasRenderingContext2D 2
1 moveTo()メソッド(CanvasRenderingContext2D ) カテゴリー 2
1 fillStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 2
2 globalCompositeOperationプロパティ | CanvasRenderingContext2D 1
2 Web Storage | その他 1
2 strokeStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 1
2 WebGLShader 1
2 setItem()メソッド | HTMLStorageオブジェクト 1
2 createShader()メソッド(WebGLRenderingContext) カテゴリー 1
2 compileShader()メソッド | WebGLRenderingContext 1
2 drawArrays()メソッド(WebGLRenderingContext) カテゴリー 1
2 compileShader()メソッド(WebGLRenderingContext) カテゴリー 1
2 遭遇例 ／ 確認例 1
2 shaderSource()メソッド | WebGLRenderingContext 1
2 transform()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2 fillText()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2 ピクセル | 色 1
2 RGBA | 色 1
2 ImageDataオブジェクト | HTMLCanvasElement 1
2 strokeRect() メソッド | CanvasRenderingContext2D 1
2025/2/5 1:02 更新