HTML canvas rect()メソッド

Canvas 对象参考手册Canvas オブジェクト

例

150*100 ピクセルの矩形を描画します：

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

試してみる »

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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

定義と使用法

rect() メソッドは矩形を作成します。

ヒント：使用してくださいstroke() 或 fill()メソッドはキャンバス上に実際に矩形を描画します。

JavaScript 構文： context.rect(x,y,width,height);

パラメータ値

パラメータ 説明
x 矩形の左上隅の x 座標。
y 矩形の左上隅の y 座標。
width 矩形の幅（ピクセル単位）。
height 矩形の高さ（ピクセル単位）。

实例

その他の例

例

rect() メソッドを使用して3つの矩形を作成します：

お使いのブラウザは canvas タグをサポートしていません。

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 赤い矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

// 緑の矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// 青い矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();

試してみる »

Canvas 对象参考手册Canvas オブジェクト

その他の拡張