Метод rect() создает прямоугольник.
Примечание: Чтобы действительно нарисовать прямоугольник, используйте метод stroke() или fill().
| JavaScript синтаксис: | context.rect(x, y, width, height); |
Значения параметров
| Параметр | Описание |
|---|---|
| x | Координата X верхнего левого угла прямоугольника |
| y | Координата Y верхнего левого угла прямоугольника |
| width | Ширина прямоугольника в пикселях |
| height | Высота прямоугольника в пикселях |
Пример использования
Пример №1
Нарисуем прямоугольник 150*100 пикселей:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
Пример №2
Создадим три прямоугольника при помощи метода rect():
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();
