HTML リファレンスマニュアル

HTML タグ完全ガイド

HTML canvas fillRect() メソッド

fillRect() は Canvas 2D API で描画する塗りつぶされた矩形のメソッド。矩形の始点は (x, y) 位置で、矩形のサイズは width と height 、fillStyle 属性が矩形のスタイルを決定します。

オンラインサンプル

描画 100*100 像素の塗りつぶされた正方形：

例

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　fillRect()　メソッドの使用(基本チュートリアルウェブ　oldtoolbag.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="200"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTML5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>
</body>
</html>

テストして見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari が fillRect() メソッドをサポートしています。

注意：Internet Explorer 8 及びそれ以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用法

fillRect() メソッドは「塗りつぶし」矩形を描画します。塗りつぶしのデフォルトの色は黒です。

ヒント：使用してください fillStyle 属性で塗りつぶし描画の色、グラデーション、パターンを設定します。

JavaScript 语法：	context.fillRect(x,y,width,height);

引数の値

引数	説明
x	矩形の左上角の x 座標。
y	矩形の左上角の y 座標。
width	矩形の幅、ピクセル単位で。
height	矩形の高さ、ピクセル単位で。

HTML canvas 参考マニュアル

HTML: <template> タグ