Нарисовать прямоугольник в canvas
"прямоугольник canvas". Как сделать прямоугольник в canvas? Несколько видов прямоугольников в canvas, простой линией, с заливкой, покрасим прямоугольник, и закруглим углы!
О прямоугольниках в canvas/
- Прямоугольник в canvas. Скачать пример линия - canvas Пример canvas прямоугольник(на отдельной странице)
- Прямоугольник в canvas с заливкой. Скачать пример линия - canvas Пример canvas прямоугольник(на отдельной странице)
- Покрасим прямоугольник в canvas Скачать прямоугольник canvas с цветной заливкой. Пример canvas прямоугольник(на отдельной странице)
- Прямоугольник canvas с закругленными углами Скачать прямоугольник canvas с закругленными углами< Прямоугольник canvas с закругленными углами.
Прямоугольник в canvas.
Для того, чтобы сделать прямоугольник в canvas вам понадобится:
Я уже делал одну страницу на тему
Нам нужен html код для canvas:
Создаем объект с помощью getElementById, чтобы взаимодействовать с "canvas html".
В случае, если браузер не поддерживает "canvas" выводим:
Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте, или null, если идентификатор контекста не определён.
Метод strokeRect() рисует прямоугольник (без заливки). Первые две цифры - координаты левого верхнего угла, две вторые - ширина и высота:
Как уже было выше сказано, что теории изменим... и вот здесь... пришло время для изменений... вместо третьей цифры(100=ширина) поставим 300, т.е. наш прямоугольник будет шириной 300px!
Соберем весь прямоугольника в canvas:
Прямоугольник в canvas.
Вот живой пример вставлено с помощью iframe :
Прямоугольник в canvas с заливкой.
Аналогично поступаем с данным пунктом! Теорию возьмем из второго пунта
И заменим ширину -когда ширина и высота отличается, то получим прямоугольни!
Для того, чтобы сделать в canvas прямоугольник с заливкой вам понадобится:
Берем тот код из теории ссылка выше... изменяем третью цифру(100 = ширина) на 300px:
Соберем весь код:
Пример : прямоугольник в canvas с заливкой.
Создадим отельный пример на отдельной странице... и размести код прямоугольника с заливкой туда или см здесь далее..
Вот живой пример вставлено с помощью iframe :
Покрасим прямоугольник в canvas
В данном пункте всё тоже самое... берем теорию 3 пунта из
Для того, чтобы покрасить прямоугольник в canvas вам понадобится:
Теория из самого первого пункта и немного её изменим... добавим туда цветную заливку...
Берем тот пример и строку с прямоугольником нарисованного линией :
заменяем на:
Свойство CanvasRenderingContext2D.fillStyle, задаёт цвет или стиль, используемый при заливке фигур
fillRect - я уже использовал во втором пункте...
Соберем весь код:
Пример : прямоугольник в 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 :