最新的Web開發教程
 

HTML canvas rect() Method

<畫布對象

例

繪製一個150 * 100像素的矩形：

YourbrowserdoesnotsupporttheHTML5canvastag。

JavaScript的：

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

瀏覽器支持

在表中的數字規定，完全支持方法的第一個瀏覽器版本。

方法
rect() 4 9 3.6 4 10.1

定義和用法

的rect()方法創建的矩形。

Tip:使用stroke()或fill()方法以實際在畫布上繪製的矩形。

JavaScript語法： context 。 rect( x,y,width,height ) ;

參數值

參數 描述 播放
x 矩形的左上角的x坐標 播放 ”
y 矩形的左上角的y坐標 播放 ”
width 矩形的寬度，以像素為單位 播放 ”
height 矩形的高度，以像素為單位 播放 ”
例子

更多示例

例

與創建三個矩形rect()方法：

Yourbrowserdoesnotsupportthecanvastag。

JavaScript的：

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

// Red rectangle
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

// Green rectangle
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// Blue rectangle
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
試一試»

<畫布對象