CanvasRenderingContext2D
.fillRect()
は座標 (x
, y
) を始点に、大きさ(width
, height
) の領域を塗りつぶします。塗りつぶす様式は fillStyle
属性に従います。
文法
void ctx.fillRect(x, y, width, height);
Parameters
x
- 矩形領域の始点のうち、X座標を指定します。
y
- 矩形領域の始点のうち、Y座標を指定します。
width
- 矩形領域の横幅を指定します。
height
- 矩形領域の高さを指定します。
使用例
fillRect
の使い方
fillRect
メソッドを利用した簡単な使用例です。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
// キャンバス全体を塗りつぶすには、以下のようにします。
// ctx.fillRect(0, 0, canvas.width, canvas.height);
以下のコードを編集して、変更がどのように適用されるか試してみてください。
仕様
Specification | Status | Comment |
---|---|---|
HTML Living Standard CanvasRenderingContext2D.fillRect の定義 |
現行の標準 |
ブラウザ間の互換性
現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。
この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。
手助けしていただける場合は、こちらから!
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (有) | (有) | (有) | (有) | (有) | (有) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (有) | (有) | (有) | (有) | (有) | (有) | (有) |