© IGP, январь 2025 г.
HTML элемент <canvas> или растровый холст используется для рисования графических объектов на лету при помощи скриптов.
Элемент <canvas> - это всего лишь контейнер для графики. Чтобы нарисовать какой-нибудь графический объект в действительности необходимо использовать специальный скрипт. Для этого у canvas есть несколько методов, которые позволяют нарисовать контуры, прямоугольники, окружности, вывести текст и добавить изображения.
В элементе <canvas> можно вывести текст, анимированный или нет.
Элемент <canvas> обладает богатыми возможностями для графического представления данных при помощи диаграмм, графиков и схем.
Объекты элемента <canvas> могут двигаться. Возможно все: от прыгающих мячей до сложной анимации.
Элемент <canvas> может быть интерактивным и реагировать на события JavaScript. Элемент <canvas> может отвечать на любое действие пользователя: нажатие на клавишу, на кнопку мыши, на элемент кнопки на веб-страницы, на движение пальца и т.д.
Элемент <canvas> может использоваться для создания игр. Методы элемента <canvas> для анимирования графических объектов предоставляют богатые возможности для создания игровых HTML приложений.
<canvas id="myCanvas" width="200" height="100"></canvas>
У элемента <canvas> должен быть определен атрибут id, чтобы можно было получить к нему доступ в скрипте JavaScript.
Атрибуты width и height необходимы для определения размеров (ширины и высоты) элемента.
На HTML странице можно определять любое количество элементов <canvas>.
Чтобы добавить рамку используется атрибут style:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000; background:white;"></canvas>
<canvas id="myCanvas1" width="200" height="100"
style="border:1px solid #000000; background:white;"></canvas>
<script>
var canvas = document.getElementById("myCanvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10,10,150,75);
</script>
Пространство canvas или растрового холста представляет собой двухмерную сетку.
Верхний левый угол холста имеет координаты (0,0).
В настоящее время цвета могут быть указаны с помощью следующих методов:
Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Шестнадцатеричные значение цвета имеет следующий синтаксис:
#RRGGBB
Все значения должны быть между 00 и FF.
Например, значение #0000FF отображается как синий,
потому что компонент BB установлен в его самое
высокое значение (FF),
а другие установлены в самое низкое значение
(00).
Допускается сокращать шестнадцатеричные числа до трех символов, если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F.
RGBA является более современным методом задания цвета, где:
Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:
<p style = "color: rgba(255, 0, 0, 0.1)">абзац красного цвета?</p>
<p style = "color: rgba(255, 0, 0, 0.2)">абзац красного цвета?</p>
<p style = "color: rgba(255, 0, 0, 0.3)">абзац красного цвета?</p>
<p style = "color: rgba(255, 0, 0, 0.4)">абзац красного цвета?</p>
<p style = "color: rgba(255, 0, 0, 0.5)">абзац красного цвета?</p>
абзац красного цвета?
абзац красного цвета?
абзац красного цвета?
абзац красного цвета?
абзац красного цвета?
К еще одному методу задания цвета относится HSL. HSL это аббревиатура, которая объединяет в себе первые буквы трех признаков:
При этом используется следующий синтаксис:
hsl(от 0° до 360°, от 0 до 100%, от 0% до 100%)
Градусы соответствуют цвету на круге оттенков:
Для насыщенности: 0% - полное отсутствие, 100% - чистый и яркий цвет.
Для осветленности: 0% (черный) до 100% (белый), значение 50% даёт чистый цвет.
HSL поддерживает прозрачность с помощью добавления альфа-канала, который задает уровень прозрачности со значениями от 0 до 1.
<p style = "color: hsla(0,100%,50%,0.1)">Я абзац красного цвета?</p>
<p style = "color: hsla(0,100%,50%,0.2)">Я абзац красного цвета?</p>
<p style = "color: hsla(0,100%,50%,0.3)">Я абзац красного цвета?</p>
<p style = "color: hsla(0,100%,50%,0.4)">Я абзац красного цвета?</p>
Я абзац красного цвета?
Я абзац красного цвета?
Я абзац красного цвета?
Я абзац красного цвета?
<p style="color:red;background:silver;">красный на сером<p>
красный на сером
Чтобы действительно нарисовать линию, нужно воспользоваться "рисовальным" методом stroke().
<canvas id="myCanvas2" width="200" height="100"
style="border:1px solid #000000; background:white;"></canvas>
<script>
var canvas = document.getElementById("myCanvas2");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Нарисуйте "светофор": три круга - красного, желтого и зеленого цвета. Одинакового радиуса, один под другим
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Создаем градиент
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Заполняем градиентом фигуру
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Создаем градиент
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Заполняем градиентом фигуру
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Нарисуйте на холсте разные геометрические фигуры, заполненые линейным градиентом.
Нарисуйте на холсте разные геометрические фигуры, заполненые радиальным градиентом.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
Нарисуйте на холсте две координатные оси (с началом координат в центре холста), установите шаг координатной сетики равным 20 и выведите подписи.
x Координата X центра круга y Координата Y центра круга r Радиус круга sAngle Начальный угол в радианах (0 — позиция на 3 часа) eAngle Конечный угол в радианах counterclockwise Необязательный параметр. Определяет, как рисовать окружность, по часовой стрелке или против часовой стрелки.
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
Метод arcTo() создает дугу/кривую между двумя касательными в элементе
Чтобы действительно нарисовать дугу в элементе <canvas>, используется метод stroke().
x1 Координата X первой касательной y1 Координата Y первой касательной x2 Координата X второй касательной y2 Координата Y второй касательной r Радиус дуги
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
// Создаем начальную точку
ctx.moveTo(20,20);
// Создаем горизонтальную линию
ctx.lineTo(100,20);
// Создаем дугу
ctx.arcTo(150,20,150,70,50);
// Продолжаем линию по вертикали
ctx.lineTo(150,120);
// Рисуем все
ctx.stroke();
Метод beginPath() начинает контур или сбрасывает текущий контур.
Для создания контуров используйте методы moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arcTo(), и arc(). Чтобы действительно нарисовать контур в элементе <canvas>, используется метод stroke().
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Зеленый контур
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="green";
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // Нарисуем его
// Пурпурный контур
ctx.beginPath();
ctx.strokeStyle="purple";
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // Нарисуем его
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();
Изучить понятие и математические основы кривых Безье
Метод clearRect() очищает заданную область пикселей внутри данного прямоугольника.
x Координата X верхнего левого угла очищаемой области y Координата Y верхнего левого угла очищаемой области width Ширина очищаемой области в пикселях height Высота очищаемой области в пикселях
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
Метод fillRect() рисует "залитый" прямоугольник. Цвет заливки, по умолчанию, черный.
Чтобы установить другой цвет/градиент заливки, используется свойство fillStyle.
x Координата X верхнего левого угла прямоугольника y Координата Y верхнего левого угла прямоугольника width Ширина прямоугольника в пикселях height Высота прямоугольника в пикселях
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);
Метод rect() создает прямоугольник.
Чтобы действительно нарисовать прямоугольник, используйте метод stroke() или fill().
x Координата X верхнего левого угла прямоугольника var ctx=c.getContext("2d"); ctx.strokeRect(20,20,150,100); height Высота прямоугольника в пикселях
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Красный прямоугольник
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// Зеленый прямоугольник
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// Синий прямоугольник
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
Метод strokeRect() рисует прямоугольник (без заливки). По умолчанию прямоугольник рисуется черным цветом.
Чтобы задать цвет, градиент или паттерн, которым будет нарисован прямоугольник используется свойство strokeStyle.
x Координата X верхнего левого угла прямоугольника y Координата Y верхнего левого угла прямоугольника width Ширина прямоугольника в пикселях height Высота прямоугольника в пикселях
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
Метод позволяет поворачивать текущий графический объект.
Чтобы графический объект был повернут, метод rotate() необходимо применить до того, как объект будет нарисован.
угол Угол поворота в радианах.
Чтобы пересчитать градусы в радианы: градусы*Math.PI/180.
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
Метод scale() изменяет масштаб текущего графического объекта, делает его больше или меньше.
Если изменяется масштаб графического объекта, то будущие графические объекты также изменят масштаб. Позиционирование также будет масштабироваться.
scalewidth Масштабирует ширину текущего графического объекта (1=100%, 0.5=50%) scaleheight Масштабирует высоту текущего графического объекта (1=100%, 0.5=50%)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
У каждого объекта на растровом холсте есть текущая матрица трансформации.
Метод transform() комбинирует путем умножения текущую матрицу трансформации с матрицей, описываемой как:
a c e b d f 0 0 1
Метод transform() позволяет масштабировать, поворачивать, двигать и скручивать текущий контекст.
a Горизонтальный масштаб b Горизонтальное скручивание c Вертикальное скручивание d Вертикальный масштаб e Горизонтальный сдвиг f Вертикальный сдвиг
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Метод translate() ретранслирует позицию (0,0) в новое место растрового холста.
Если после метода translate() вызывается, например, такой метод как fillRect(), то его значение добавляется к значениям x- и y-координат.
x Значение, добавляемое к горизонтальным (x) координатам y Значение, добавляемое к вертикальным (y) координатам
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
Нарисовать кубик со стороной 20 в аксонометрической (изометрической) проекции.
Является вариантом аксонометрической проекции, при котором все три оси координат имеют одинаковый наклон (120°). В данном случае изменение размеров проецируемого предмета одинаковое по всем трем осям. Для построения чертежей чаще всего применяется прямоугольная изометрия (проектирующие лучи перпендикулярны плоскости).
В этом случае две оси в системе координат имеют одинаковый наклон, а третья — другой (например, 135°, 135° и 90°). Соответственно, уменьшение размеров предмета будет одинаковым только по двум осям, а сам он будет выглядеть повернутым фронтальной стороной к наблюдателю.
В данном случае коэффициенты искажения изображения проецируемого предмета отличаются друг от друга сразу по трем осям (150°, 70°, 140°). Следовательно, аксонометрический вид предмета будет специфичным: наблюдатель по-прежнему увидит его с тех сторон, но некоторые детали могут быть менее детализированны за счет изменения угла обзора.
Нарисовать кубик состороной 1. Вращать кубик на экране средствами JavaScript. Объяснить математическую модель и алгоритм.