Что такое canvas
Canvas – элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript.При помощи canvas можно создавать игры, отображать графики, делать интересные визуальные эксперименты!)
Рассмотрим строение canvas: начало отсчёта (координаты x и у) находится слева сверху. У canvas есть ширина (width) и высота (height), которые мы будем задавать вначале скрипта.
<canvas></canvas>
Try it out
1. В вашей папке с сайтами вы создавали папку "Javascript - 6". Скопируйте её, переименуйте на "Javascript - 7". Откройте папку в редакторе.2. В файле index.html вначале тела документа добавьте тег для создания canvas:
<canvas id="canvas"></canvas>
Этому элементу мы дали id с названием canvas. Это нам понадобится для того, чтобы по айдишнику работать с canvas в javascript.
3. Для того, чтобы canvas было видно на экране в браузере, давайте добавим ему рамочку. Нам понадобятся стили. Создадим файл style.css, добавим на него ссылку в index.html:
<link rel="stylesheet" href="style.css">
Пропишем в style.css правило для нашего холста:
#canvas {
border:2px solid black;
}
Откройте страницу в браузере, увидите холст. По умолчанию, его ширина 300 пикселей, а высота – 150.
4. Теперь начнём писать скрипты для создания на холсте разных объектов. В файле script.js пропишем следующий код:
let canvas = document.getElementById("canvas");
Он означает, что на странице ищется элемент с айдишником "canvas". Наш холст, который найдётся будет храниться в переменной canvas и мы можем к ней дальше обращаться.
Далее вызовем контекст 2d-графики:
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
Именно при помощи контекста мы будем выводить графику на холст.
5. Зададим ширину и высоту холста. Для начала создадим переменные, в которых будем хранить эти величины, так как они нам понадобятся не один раз:
let width = 500;
let height = 300;
Теперь назначим свойствам ширины и высоты холста значениям этих переменных:
canvas.width = width;
canvas.height = height;
6. Этот код, который мы написали – это базовый шаблон для работы с холстом. С него обычно всё начинается. Приведём его полностью:
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let width = 500;
let height = 300;
canvas.width = width;
canvas.height = height;
7. Пора вывести на холст первые фигуры.
Сначала определим цвет заливки фигур:
context.fillStyle = "black";
После этого выведем залитый прямоугольник в координатах х=50, у=50 с размером 100х100 пикселей:
context.fillRect(50, 50, 100, 100);
Добавим ещё фигуры:
// red rectangle
context.fillStyle = "red";
context.fillRect(150, 20, 100, 100);
// line rectangle
context.lineWidth = 10;
context.strokeRect(300, 100, 50, 150);
Результат приведён на изображении ниже, сравните его со своим:
Сначала нарисуем серую рамку внутри холста:
context.strokeStyle = "grey";
context.lineWidth = 5;
context.strokeRect(50, 50, 400, 200);
Зададим чёрный цвет для эллипса:
context.fillStyle = "Black";
context.beginPath(); // начать рисование контура
context.arc(250, 150, 80, 0, 2 * Math.PI); // нарисовать окружность
context.closePath(); // закрыть контур
context.fill(); // залить контур цветом
На рисунке снизу есть объяснение, как рисуется окружность:
• вначале указываются координаты центра окружности: x=250, y=150
• радиус r=80
• угол начала рисования линии = 0
• размер окружности 2 * Math.Pi = 360 градусов (то есть, полная окружность)
context.fillText("Hello!",50,50);
Размер текста можно изменять, поэтому давайте добавим перед командой вывода текста операторы для его форматирования:
context.font = "30px Arial";
context.fillStyle = "rgb(100,150,150)"; // цвет указан в формате Red Green Blue
context.fillText("Hello!",50,50);
В конспект
Шаблон для работы с canvas
let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");
let width = 500;
let height = 300;
canvas.width = width;
canvas.height = height;
Цвет заливки
context.fillStyle = "black"; // текстовый формат цветаcontext.fillStyle = "rgb(100,150,150)"; // цвет указан в формате Red Green Blue
context.fillStyle = "#ffffff" // белый цвет в формате HEX
Цвет обводки
context.strokeStyle = "grey";Добавление прямоугольника с заливкой
context.fillRect(x, y, rectWidth, rectHeight);Добавление прямоугольника с обводкой
context.strokeRect(x, y, rectWidth, rectHeight);Добавление дуги
context.beginPath(); // начать рисование контураcontext.arc(centerX, centerY, radius, angleBegin, angleEnd); // нарисовать дугу
context.closePath(); // закрыть контур
Добавление текста
context.font = "30px Arial"; // размер шрифта и его семейство (можно указывать что-то одно)context.fillText("Hello!",50,50);
Задачи
Внимание! Готовые скрипты для выполнения задач сохраняйте в отдельные файлы, отмеченные номером задачи, например: script1.js – для задачи №1, script2.js – для задачи №2.
Задача 7.1*. При помощи прямоугольников нарисуйте флаг Украины на холсте
Задача 7.2*. При помощи прямоугольника и окружности, нарисуйте флаг Японии на холсте.
Задача 7.4**. Нарисуйте на холсте при помощи canvas логотип этого сайта. Размеры каждого квадрата = 200х200 пикселей. Размер холста = 800х600. Используемые HEX-коды цветов:
• мятный #56E39F
• апельсиновый #F2994A
• небесный #08B2E3
• персиковый #EE6352
Задача 7.6**. Апгрейдите программу из задачи 5 таким образом, чтобы размеры холста (width and height) и прямоугольника (rectWidth and rectHeight) программа спрашивала у пользователя. Прямоугольник заданных размеров должен выводиться ровно в центре экрана.
Задача 7.7*. Создайте чёрный эллипс радиусом в 80рх в случайном месте на холсте. Программа при перезапуске перерисовывает эллипс в новом случайном месте.
Задача 7.8**. Заполните поле эллипсами в случайной позиции:
• 100 эллипсов цвета #56E39F
• 100 эллипсов цвета #F2994A
• 100 эллипсов цвета #08B2E3
• 100 эллипсов цвета #EE6352
Задача 7.9**. Заполните 1 ряд эллипсами цвета #2d2d2d. Подсказка: сначала напишите эту программу хардкодом, потом найдите закономерность и замените хардкод на цикл. Программа должна быть универсальна для любой ширины холста и диаметра эллипса
Вот примеры выполнения этой программы:
 |
| Диаметр эллипса = 100рх, ширина экрана 800рх |
 |
| Диаметр эллипса = 20рх, ширина экрана 800рх |
Пример выполнения готового скрипта
 |
| Диаметр эллипса = 50рх, ширина экрана 800рх, высота 600рх |
Комментарии
Отправить комментарий