Нарисовать прямоугольник в canvas

"прямоугольник canvas". Как сделать прямоугольник в canvas? Несколько видов прямоугольников в canvas, простой линией, с заливкой, покрасим прямоугольник, и закруглим углы!

О прямоугольниках в canvas/

1. Прямоугольник в canvas.
Скачать пример линия - canvas Пример canvas прямоугольник(на отдельной странице)

2. Прямоугольник в canvas с заливкой.
Скачать пример линия - canvas Пример canvas прямоугольник(на отдельной странице)

3. Покрасим прямоугольник в canvas
Скачать прямоугольник canvas с цветной заливкой. Пример canvas прямоугольник(на отдельной странице)

4. Прямоугольник canvas с закругленными углами
Скачать прямоугольник canvas с закругленными углами< Прямоугольник canvas с закругленными углами.

Прямоугольник в canvas.

Для того, чтобы сделать прямоугольник в canvas вам понадобится:

Я уже делал одну страницу на тему - используем первый пункт теории и немного её изменим!

Нам нужен html код для canvas:

<canvas id="myCanvas" width="600" height="200">Ваш браузер не поддерживает canvas</canvas>

Создаем объект с помощью getElementById, чтобы взаимодействовать с "canvas html".

var canvas = document.getElementById("myCanvas");

В случае, если браузер не поддерживает "canvas" выводим:

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

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте, или null, если идентификатор контекста не определён.

var ctx= canvas.getContext("2d");

Метод strokeRect() рисует прямоугольник (без заливки). Первые две цифры - координаты левого верхнего угла, две вторые - ширина и высота:

Как уже было выше сказано, что теории изменим... и вот здесь... пришло время для изменений... вместо третьей цифры(100=ширина) поставим 300, т.е. наш прямоугольник будет шириной 300px!

ctx.strokeRect(50, 50, 300, 100);

Соберем весь прямоугольника в canvas:

Прямоугольник в canvas.

Вот живой пример вставлено с помощью iframe :

Прямоугольник в canvas с заливкой.

Аналогично поступаем с данным пунктом! Теорию возьмем из второго пунта .

И заменим ширину -когда ширина и высота отличается, то получим прямоугольни!

Для того, чтобы сделать в canvas прямоугольник с заливкой вам понадобится:

Берем тот код из теории ссылка выше... изменяем третью цифру(100 = ширина) на 300px:

ctx.fillRect(50, 50, 300, 100);

Соберем весь код:

Пример : прямоугольник в canvas с заливкой.

Создадим отельный пример на отдельной странице... и размести код прямоугольника с заливкой туда или см здесь далее..

Вот живой пример вставлено с помощью iframe :

Покрасим прямоугольник в canvas

В данном пункте всё тоже самое... берем теорию 3 пунта из и изменим третью цифру, которая отвечает за ширину...

Для того, чтобы покрасить прямоугольник в canvas вам понадобится:

Теория из самого первого пункта и немного её изменим... добавим туда цветную заливку...

Берем тот пример и строку с прямоугольником нарисованного линией :

ctx.strokeRect(50, 50, 100, 100);

заменяем на:

Свойство CanvasRenderingContext2D.fillStyle, задаёт цвет или стиль, используемый при заливке фигур

ctx.fillStyle = "rgb(255, 0, 0)";

fillRect - я уже использовал во втором пункте...

ctx.fillRect(50, 50, 300, 100);

Соберем весь код:

Пример : прямоугольник в canvas с заливкой.

Создадим отельный пример на отдельной странице... и размести код прямоугольника с цветной заливкой туда или см здесь далее..

Вот живой пример вставлено с помощью iframe :

Прямоугольник canvas с закругленными углами

Для того, чтобы закруглить углы в прямоугольнике в canvas... вам понадобится: давайте напишем функцию...

Давайте напишем функцию... которая будет получать координаты углов и по ним будет закруглять углы у прямоугольника.

function roundAngle(x,y,w,h,r){

r = (Math.min(w,h)/2 > r)? r : Math.min(w,h)/2;

return `M ${x + r} ${y} l ${w-2*r} 0 q ${r} 0 ${r} ${r}

l 0 ${h-2*r} q 0 ${r} ${-r} ${r}

l ${-w+2*r} 0 q ${-r} 0 ${-r} ${-r}

l 0 ${-h+2*r} q 0 ${-r} ${r} ${-r}`;

}

Сделаем сразу два прямоугольника с заливной и без...

Соберем весь код:

Пример : прямоугольник canvas с закругленными углами

Создадим отельный пример на отдельной странице... и размести код прямоугольника с цветной заливкой туда или см здесь далее..

Вот живой пример вставлено с помощью iframe :