Нарисовать квадрат в canvas

"квадрат canvas" - как нарисовать квадрат в canvas? Простой квадрат без заливки. Квадрат с заливкой по умолчанию. И цветной квадрат в canvas!

Рисуем квадрат в canvas!

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

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

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

Квадрат в canvas.

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

Создаем "канвас html" :

<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() рисует прямоугольник (без заливки). Первые две цифры - координаты левого верхнего угла, две вторые - ширина и высота:

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

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

Квадрат в canvas.

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




Квадрат в canvas с заливкой.

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

Почти вся теория из предыдущего пункта ...

Берем тот код имз примера и строку с линией :

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

Заменяем на квадрат с заливкой:

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

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

Пример : Квадрат в canvas с заливкой.

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

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




Покрасим Квадрат в canvas

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

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

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

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

заменяем на:

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

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

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

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

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

Пример : Квадрат в canvas с заливкой.

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

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