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 и собственно настроить холст. Для этого нужно сделать два шага:

  1. Сначала вам нужно получить холст из DOM. Это довольно просто:
const canvas = document.getElementById(“pixelCanvas”);

2. Вы должны получить контекст рисования на холсте.

const ctx = canvas.getContext(“2d”);

Теперь имейте в виду, что и холст (являющийся элементом DOM), и ctx являются просто объектами. Больше ничего. Не меньше. Прежде чем мы действительно начнем рисовать на холсте, я должен познакомить вас с некоторыми методами и свойствами.

  1. 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);

И ваша картинка должна выглядеть точно так же. Как только вы можете нарисовать одну линию, вы можете нарисовать много линий. А если вы можете нарисовать много линий, вы можете нарисовать сетку.

Здесь я пока оставлю вашу. Поиграйте с тем, что я вам уже дал, и посмотрите, сможете ли вы сделать сетку самостоятельно. В следующий раз мы нарисуем сетку, а затем выясним, где разместить квадраты.