Среда программирования:
HTML 5 + JavaScript
В этом уроке будем учиться отрисовывать графические примитивов при помощи <canvas>.
В данном уроке подразумевается что обучающийся знаком с HTML5 и JavaScript.
Для начала нам нужно задать шаблон HTML страницы :
<html> <head> <script src="js.js"></script>//Подключение JS </head> <body > </body> </html>
Следующим шагом необходимо создать сам холст
добавляем тег <canvas> в <body>, а также добавим событие onload в тег body и передадим название функции,которую будем загружать
<html> <head> <script src="js.js"></script>//Подключение JS </head> <body onload="draw();">//запуск при загрузке функции draw <canvas id="canvas" width="150" height="150"></canvas>//задание холста </body> </html>
Далее переходим в js.js и пишем ниже приведенный код в этот файл
Готово!Холст отрисован.Теперь можно перейти к отрисовке графических примитивов.
Пожалуй, для начала стоит начать с отрисовки простой линии.
1.Отрисовка линии
Для отрисовки линии нам понадобятся такие встроенные функции как:
moveTo(x, y) // перемещает "курсор" в позицию x, y и делает её текущей lineTo(x, y) // ведёт линию из текущей позиции в указанную, и делает в последствии указанную текущей
задаем изначальные координаты точки откуда будет идти линия
ctx.beginPath();//начинает запись пути ctx.moveTo(125,125);//задание начальной точки ctx.lineTo(125,45);//линия ctx.lineTo(45,125);//линия ctx.closePath();//конец пути ctx.stroke();//определение отрисовки пути
Пример:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // залитый треугольник ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill(); // пустой треугольник ctx.beginPath(); ctx.moveTo(125,125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); ctx.stroke(); } }
Выглядит это так:
2.Отрисовка прямоугольников
Для того чтобы отрисовать прямоугольник нам потребуются функции:
fillRect(x, y, width, height)//Рисование заполненного прямоугольника. strokeRect(x, y, width, height)//Рисование прямоугольного контура. clearRect(x, y, width, height)//Очистка прямоугольной области, делая содержимое совершенно прозрачным.
Пример:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } }
Выглядит это вот так:
3.Дуги
Для отрисовки дуг мы будим использовать такие функции как:
arc(x, y, radius, startAngle, endAngle, anticlockwise)//Рисуем дугу с центром в точке (x,y) радиусом r, начиная с угла startAngle и заканчивая в endAngle в направлении против часовой стрелки anticlockwise (по умолчанию по ходу движения часовой стрелки). arcTo(x1, y1, x2, y2, radius)//Рисуем дугу с заданными контрольными точками и радиусом, соединяя эти точки прямой линией.
Пример:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); for(var i=0;i<4;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); var x = 25+j*50; // x координата var y = 25+i*50; // y координата var radius = 20; // радиус var startAngle = 0; // стартовая точка отрисовки var endAngle = Math.PI+(Math.PI*j)/2; // конечная точка отрисовки var anticlockwise = i%2==0 ? false : true; // Направление (по часовой или против часовой стрелки) ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i>1){ ctx.fill(); } else { ctx.stroke(); } } } } }
отображается в браузере это так:
4.Передвижение пера
Одна очень полезная функция, которая ничего не рисует, но связана по смыслу с вышеописанными функциями - это moveTo(). Вы можете представить это как отрыв (подъем) пера от бумаги и его перемещение в другое место.
moveTo(x, y)//moveTo(x, y) Перемещает перо в точку с координатами x и y.
При инициализации canvas или при вызове beginPath(), вы захотите использовать функцию moveTo() для перемещения в точку начала рисования. Можно использовать moveTo() и для рисования несвязанного(незакрытого) контура. Посмотрите на смайлик ниже.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Внешняя окружность ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // рот (по часовой стрелке) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Левый глаз ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Правый глаз ctx.stroke(); } }
Результат этого ниже:
Цвета, стили и тени
| Свойство | Описание |
|---|---|
| fillStyle | Задание или возврат цвета, градиента или узора, используемого для заполнения чертежа |
| strokeStyle | Задание или возврат цвета, градиента или узора, используемого для штрихов |
| shadowColor | Задает или возвращает цвет, используемый для теней |
| shadowBlur | Устанавливает или возвращает уровень размытия для теней |
| shadowOffsetX | Задание или возврат горизонтального расстояния тени от фигуры |
| shadowOffsetY | Задание или возврат вертикального расстояния тени от фигуры |
| Метод | Описание |
|---|---|
| createLinearGradient() | Создание линейного градиента (для использования в содержимом холста) |
| createPattern() | Повторяет указанный элемент в указанном направлении |
| createRadialGradient() | Создание радиального/кругового градиента (для использования в содержимом холста) |
| addColorStop() | Задает цвета и позиции остановки в объекте градиента |
Стили линий
| Свойство | Описание |
|---|---|
| lineCap | Задание или возврат стиля концевых колпачков для линии |
| lineJoin | Задает или возвращает тип создаваемого угла, когда две линии встречаются |
| lineWidth | Задает или возвращает текущую ширину строки |
| miterLimit | Задает или возвращает максимальную длину среза |
Прямоугольники
| Метод | Описание |
|---|---|
| rect() | Создание прямоугольника |
| fillRect() | Рисует "заполненный" прямоугольник |
| strokeRect() | Рисует прямоугольник (без заливки) |
| clearRect() | Очищает заданные пикселы в пределах заданного прямоугольника |
Пути
| Метод | Описание |
|---|---|
| fill() | Заполняет текущий чертеж (путь) |
| stroke() | На самом деле рисует путь, который вы определили |
| beginPath() | Начало пути или сброс текущего пути |
| moveTo() | Перемещение контура в указанную точку на холсте без создания линии |
| closePath() | Создание контура от текущей точки до начальной точки |
| lineTo() | Добавляет новую точку и создает линию от этой точки до последней указанной точки на холсте |
| clip() | Обрезает область любой формы и размера из исходного полотна |
| quadraticCurveTo() | Создание квадратичной кривой Безье |
| bezierCurveTo() | Создание кубической кривой Безье |
| arc() | Создание дуги/кривой (используется для создания окружностей или частей окружностей) |
| arcTo() | Создание дуги/кривой между двумя касательными |
| isPointInPath() | Возвращает значение true, если указанная точка находится в текущем пути, в противном случае false |
Преобразования
| Метод | Описание |
|---|---|
| scale() | Масштабирование текущего чертежа больше или меньше |
| rotate() | Поворот текущего чертежа |
| translate() | Пересопоставление позиции (0,0) на холсте |
| transform() | Заменяет текущую матрицу преобразования для чертежа |
| setTransform() | Сбрасывает текущее преобразование в матрицу удостоверения. Затем запускает преобразовать () |
Текст
| Свойство | Описание |
|---|---|
| font | Задает или возвращает текущие свойства шрифта для текстового содержимого |
| textAlign | Задает или возвращает текущую трассу для текстового содержимого |
| textBaseline | Задает или возвращает текущую базовую линию текста, используемую при рисовании текста |
| Метод | Описание |
|---|---|
| fillText() | Рисует "заполненный" текст на холсте |
| strokeText() | Рисует текст на холсте (без заливки) |
| measureText() | Возвращает объект, содержащий ширину заданного текста |
Рисунок
| Метод | Описание |
|---|---|
| drawImage() | Рисует изображение, холст или видео на холсте |
Манипулирование пикселями
| Свойство | Описание |
|---|---|
| width | Возвращает ширину объекта ImageData |
| height | Возвращает высоту объекта ImageData |
| data | Возвращает объект, содержащий данные изображения заданного объекта ImageData |
| Метод | Описание |
|---|---|
| createImageData() | Создает новый пустой объект ImageData |
| getImageData() | Возвращает объект ImageData, который копирует пиксельные данные для заданного прямоугольника на холсте |
| putImageData() | Помещает данные изображения (из заданного объекта ImageData) обратно на холст |
Композиции
| Свойство | Описание |
|---|---|
| globalAlpha | Задание или возврат текущего значения альфа-канала или прозрачности чертежа |
| globalCompositeOperation | Задает или возвращает способ рисования нового изображения на существующем изображении |
Онлайн-среда: https://html5css.ru/edithtm/index.php
Пример:
<!DOCTYPE html> <html> <body> <h3>A demonstration of how to access a CANVAS element</h3> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <p>Click the button to draw on the canvas.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(20, 20, 150, 100); } </script> </body> </html>