rect()¶
Метод rect()
создает прямоугольник.
Примечание: Чтобы действительно нарисовать прямоугольник, используйте метод stroke()
или fill()
.
Синтаксис¶
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()
Ссылки¶
- Метод
rect()
MDN (рус.)