Pixel Art Maker: Учебное пособие по HTML5 Canvas - Часть 1: Настройка Canvas
Вступление
В этом уроке мы собираемся создать создателя пиксельной графики с использованием HTML5 Canvas. Это был последний проект стипендиальной программы «Расти вместе с Google» от Udacity. В исходном проекте использовалась таблица со строками и столбцами, составляющими квадраты, а затем пользователь должен был использовать входные данные для изменения размера сетки. В моей версии мы будем использовать HTML5 Canvas и использовать эти входные данные, чтобы определить, сколько квадратов будет поперек и вниз по сетке.
Предположения
Переходя к этому руководству, вам необходимо знать:
- HTML / CSS
- Промежуточные знания JavaScript (манипуляции с DOM, типы объектов / функции конструкторов и т. Д.)
- Знание HTML5 Canvas - это хорошо, но не критично
- Вам также понадобится учетная запись GitHub, чтобы получить стартовый код.
Начиная
Самое первое, что нам нужно сделать, это пойти и получить исходный код. Вы можете найти его по адресу https://github.com/udacity/project-pixel-art-maker-starter. Если вы никогда раньше не использовали GitHub, просто создайте бесплатную учетную запись. После этого загрузить zip-файл очень просто.
После того, как вы загрузили и распаковали папку, должно быть три файла:
- index.html
- designs.js
- styles.css
Настройка холста
Первый файл, который мы собираемся редактировать, - это index.html. Мы собираемся превратить стол в холст. Мы собираемся задать холсту ширину и высоту по 400 пикселей каждый. Строка 24 должна выглядеть так:
<canvas id="pixelCanvas" width="400" height="400"></canvas>
Следующее, что мы хотим сделать, это добавить границу к холсту, чтобы мы могли ее видеть. В styles.css
canvas { border: 2px solid black;}
Пока мы находимся в этом файле, удалите все стили, относящиеся к тегам ‹table›, ‹tr› и ‹td›. Они нам просто больше не понадобятся.
Затем вам нужно перейти в designs.js и собственно настроить холст. Для этого нужно сделать два шага:
- Сначала вам нужно получить холст из DOM. Это довольно просто:
const canvas = document.getElementById(“pixelCanvas”);
2. Вы должны получить контекст рисования на холсте.
const ctx = canvas.getContext(“2d”);
Теперь имейте в виду, что и холст (являющийся элементом DOM), и ctx являются просто объектами. Больше ничего. Не меньше. Прежде чем мы действительно начнем рисовать на холсте, я должен познакомить вас с некоторыми методами и свойствами.
- ctx.fillStyle - это свойство объекта, которое определяет цвет вашей формы. Вы бы изменили fillStyle следующим образом:
ctx.fillStyle = “red”;
2. ctx.fillRect (x, y, width, height) - это метод создания прямоугольников и, соответственно, квадратов.
ctx.fillRect(10, 10, 150, 150);
К этому моменту ваша веб-страница должна выглядеть так:
Рисование линий
Прежде чем мы сможем создать сетку, нам нужно выяснить, как нарисовать линию. Это не так просто, как просто ввести четыре координаты в функцию, по крайней мере, пока. Мы должны построить эту функцию. Прежде чем строить функцию, мы должны выяснить, как нарисована линия. К сожалению, это не так просто, как нарисовать прямоугольник.
Во-первых, давайте определим, какого цвета будет линия, с помощью strokeStyle. Я выберу красивый классический синий цвет;
ctx.strokeStyle = “blue”;
После этого нужно начинать путь. Это дает холсту понять, что мы готовы приступить к рисованию. Думайте об этом, как если бы вы положили ручку на бумагу.
ctx.beginPath();
Затем нам нужно указать холсту, с каких координат мы хотим начать. Почему бы нам не начать прямо под нашей красной площадью?
ctx.moveTo(15, 175);
Теперь добавим другие координаты:
ctx.lineTo(250, 350);
Хорошо, теперь, когда у вас есть координаты квадрата, вам все еще нужно указать холсту, чтобы он рисовал линию.
ctx.stroke();
Прохладный! Теперь, поскольку рисование сетки включает в себя множество линий, было бы неплохо превратить этот код в функцию.
function drawLine(x1, y1, x2, y2){ ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } drawLine(15, 175, 250, 350);
И ваша картинка должна выглядеть точно так же. Как только вы можете нарисовать одну линию, вы можете нарисовать много линий. А если вы можете нарисовать много линий, вы можете нарисовать сетку.
Здесь я пока оставлю вашу. Поиграйте с тем, что я вам уже дал, и посмотрите, сможете ли вы сделать сетку самостоятельно. В следующий раз мы нарисуем сетку, а затем выясним, где разместить квадраты.