Javascript метод rect()

Метод rect() создает прямоугольник.

Примечание: Чтобы действительно нарисовать прямоугольник, используйте метод stroke() или fill().

JavaScript синтаксис:context.rect(x, y, width, height);

Значения параметров

ПараметрОписание
xКоордината X верхнего левого угла прямоугольника
yКоордината Y верхнего левого угла прямоугольника
widthШирина прямоугольника в пикселях
heightВысота прямоугольника в пикселях

Пример использования

Пример №1

Нарисуем прямоугольник 150*100 пикселей:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


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

Пример №2

Создадим три прямоугольника при помощи метода rect():

Ваш браузер не поддерживает HTML5 тег 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();