Как нарисовать прямоугольник на Canvas?

Пользователь

от sydnie , в категории: Компьютерные технологии , 8 месяцев назад

Как нарисовать прямоугольник на Canvas?

Facebook Vk Ok Twitter Telegram Whatsapp

1 ответ

Пользователь

от ladarius.greenholt , 8 месяцев назад

@sydnie 

Для того, чтобы нарисовать прямоугольник на Canvas, нужно использовать метод rect(). Он принимает 4 аргумента: координаты верхнего левого угла, ширину и высоту прямоугольника.


Вот пример кода:

1


1
2
3
4
5
6
7
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// координаты верхнего левого угла: x=10, y=10
// ширина: 100, высота: 50
ctx.rect(10, 10, 100, 50);
ctx.stroke(); // рисуем только контур прямоугольника


Этот код нарисует прямоугольник размером 100х50 пикселей, начинающийся в левом верхнем углу canvas с координатами (10, 10). ctx.stroke() используется для отрисовки только контура прямоугольника, чтобы он не был закрашен. Если вы хотите закрасить прямоугольник, используйте метод ctx.fillRect().