rect()

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

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

Синтаксис

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

Параметры

x

Координата X верхнего левого угла прямоугольника

y

Координата Y верхнего левого угла прямоугольника

width

Ширина прямоугольника в пикселях

height

Высота прямоугольника в пикселях

Спецификация

• HTML Living Standard

Примеры

Пример 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()

Ссылки

• Метод rect() ^{MDN (рус.)}