Canvas rect() 方法

Maukio ya Canvas

定义和用法

rect() 方法创建矩形。

提示：请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

实例

例子 1

绘制 150*100 像素的矩形：

Your browser does not support the HTML5 canvas tag.

JavaScript:

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

Jifunze tena kwa mwenyewe

语法

context.rect(x,y,width,height);

参数值

参数 描述
x 矩形左上角的 x 坐标。
y 矩形左上角的 y 坐标。
width 矩形的宽度，以像素计。
height 矩形的高度，以像素计。

更多实例

例子 2

通过 rect() 方法来创建三个矩形：

Your browser does not support the HTML5 canvas tag.

JavaScript:

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();

Jifunze tena kwa mwenyewe

Mwongozo wa vyenginevu

Mwili wa tabia huzungumza kwa sababu ya vyenginevu vya kwanza vya kusaidia hiyo tabia.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Kweli:Internet Explorer 8 na vyenginevu vya zamani hawasaidia elementi ya <canvas>.

Maukio ya Canvas