Нарисовать квадрат в canvas
Рисуем квадрат в canvas!
- Квадрат в canvas. Скачать пример квадрат - canvas
- Квадрат в canvas с заливкой. Скачать пример квадрат в canvas с заливкой
- Покрасим Квадрат в canvas Скачать квадрат canvas с цветной заливкой.
Пример canvas квадрат(на отдельной странице)
Пример canvas квадрат(на отдельной странице)
Пример canvas квадрат(на отдельной странице)
Квадрат в canvas.
Для того, чтобы сделать квадрат в canvas вам понадобится:
Создаем "канвас html" :
Создаем объект с помощью getElementById, чтобы взаимодействовать с "canvas html".
В случае, если браузер не поддерживает "canvas" выводим:
Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте, или null, если идентификатор контекста не определён.
Метод strokeRect() рисует прямоугольник (без заливки). Первые две цифры - координаты левого верхнего угла, две вторые - ширина и высота:
Соберем весь квадрата в canvas:
Квадрат в canvas.
Вот живой пример вставлено с помощью iframe :Квадрат в canvas с заливкой.
Для того, чтобы сделать в canvas квадрат с заливкой вам понадобится:
Почти вся теория из предыдущего пункта ...
Берем тот код имз примера и строку с линией :
Заменяем на квадрат с заливкой:
Соберем весь код:
Пример : Квадрат в canvas с заливкой.
Создадим отельный пример на отдельной странице... и размести код квадрата с заливкой туда или см здесь далее..Вот живой пример вставлено с помощью iframe :
Покрасим Квадрат в canvas
Для того, чтобы покрасить квадрат в canvas вам понадобится:
Теория из самого первого пункта и немного её изменим... добавим туда цветную заливку...
Берем тот пример и строку с квадратом нарисованного линией :
заменяем на:
Свойство CanvasRenderingContext2D.fillStyle, задаёт цвет или стиль, используемый при заливке фигур
fillRect - я уже использовал во втором пункте...
Соберем весь код:
Пример : Квадрат в canvas с заливкой.
Создадим отельный пример на отдельной странице... и размести код квадрата с цветной заливкой туда или см здесь далее..Вот живой пример вставлено с помощью iframe :

подробнее.
подробнее.