在html中使用rect函数,HTML canvas rect()用法及代码示例

HTML中的rect()方法用于在HTML中创建矩形。

用法:

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

参数：

x:它存储矩形左上角的x坐标。

y:它存储矩形左上角的y坐标。

width:它以像素为单位存储宽度。

height:它以像素为单位存储高度。

示例1：

HTML canvas rect() Method

width="500"

height="300">

var x =

document.getElementById("GFG");

var contex =

x.getContext("2d");

// Create rectangle

contex.rect(50, 50, 350, 200);

contex.strokeStyle = "green";

contex.lineWidth = "10";

contex.stroke();

输出：

示例2：

HTML canvas rect() Method

width="500"

height="300">

var x =

document.getElementById("GFG");

var contex =

x.getContext("2d");

contex.rect(50, 50, 350, 200);

var x = document.getElementById("GFG");

var contex = x.getContext("2d");

contex.rect(100, 100, 250, 100);

contex.strokeStyle = "green";

contex.lineWidth = "10";

contex.font = "30px Arial";

contex.fillText("GeeksforGeeks", 120, 150);

contex.stroke();

输出：

支持的浏览器：

谷歌浏览器

Internet Explorer 9.0

火狐浏览器

苹果浏览器

Opera