るきおWeb研究所 HTML5 APIリファレンス
HTML5 canvas

るきおWeb研究所 > HTML5 APIリファレンス > CanvasRenderingContext2D >

fillRect メソッド

この記事が対象とする仕様

  HTML5 HTML構文 ◎ 対象です。
  HTML5 XHTML構文 ◎ 対象です。

出典：HTML Canvas 2D Context 2012年3月7日 Editor's Draft版 http://dev.w3.org/html5/2dcontext/

canvas要素に塗りつぶされた四角形を描画します。

 

１．構文

void fillRect(double x, double y, double w, double h);

パラメーター

x

始点のX座標。

y

始点のY座標。

w

四角形の横幅。0を指定したとき何も描画されません。

h

四角形の高さ。0を指定したとき何も描画されません。

 

２．解説

fillStyleプロパティで指定された色で四角形を描画します。

 

３．例

次の例はcanvas要素に黒い長方形を描画します。

var canvas = document.getElementById("Canvas1");
var g = canvas.getContext('2d');
g.fillRect(20, 20, 80, 40);

 

色を指定するにはfillStyleプロパティを使用します。次の例では赤い長方形を描画します。

var canvas = document.getElementById("Canvas1");
var g = canvas.getContext('2d');
g.fillStyle = 'red';
g.fillRect(20, 20, 80, 40);

 

４．プラットフォーム

HTML5

IE9