Давайте продолжим с того места, на котором остановились в части 2, и расширим наш холст, чтобы освободить место для других типов полигонов на нашем веб-холсте JavaScript!
Во-первых, давайте сделаем небольшую уборку и удалим эту старую закомментированную функцию drawLoop(), потому что этот более плавный requestAnimationFrame() работает немного лучше, да?
Хорошо, тогда давайте подготовимся к рисованию не только прямоугольника, человек может обрабатывать только определенное количество прямоугольников, поэтому… вместо того, чтобы наша функция init() содержала «drawRect» внутри, давайте изменим ее на следующую.
window.requestAnimationFrame(draw);
Нам также нужно вынуть window.requestAnimationFrame(drawRect); из нижней части самой функции drawRect() и вместо этого поместить ее в нижнюю часть новой функции draw().
Затем над самой функцией drawRect() мы добавим новую функцию draw(), с помощью которой мы можем рисовать больше, чем просто прямоугольники. Псс... треугольники!
function draw() {
drawRect();
window.requestAnimationFrame(draw);
}
Теперь о том, как нарисовать самый простой из всех правильных многоугольников… треугольник/треугольник. Но сначала давайте немного упростим работу над нашим треугольником и немного увеличим наш холст, изменив ширину на 600 пикселей и высоту на 300 пикселей.
‹canvas id='myCanvas' width='600' height='300'›
Теперь мы можем использовать двойную косую черту, чтобы закомментировать функцию drawRect(), чтобы временно отключить прямоугольники, и вместо этого добавить вызов функции drawTriangle() в нашу функцию draw().
function draw() {
//drawRect();
drawTriangle();
window.requestAnimationFrame(draw);
Отлично, теперь прямо под этой функцией draw() мы можем добавить нашу новую функциональность треугольника. Но, в отличие от прямоугольника, здесь нет встроенной функции JavaScript для рисования этой конкретной фигуры, поэтому мы должны рисовать фигуру построчно. Мы постараемся создать равносторонний треугольник (также известный как правильный многоугольник или правильный треугольник).
function drawTriangle() {
ctx.moveTo(200, 50);
ctx.lineTo(100, 200);
ctx.strokeStyle = '#9ecc35';
ctx.lineWidth = 30;
ctx.stroke();
}
После того, как вы добавили приведенный выше код JavaScript и обновили свой браузер, вы должны увидеть что-то вроде следующего.
Как вы могли догадаться, взглянув на фрагмент JavaScript, код перемещает нас к координате на нашем белом холсте и говорит веб-браузеру создать линию с другой координатой. Затем мы устанавливаем стиль и ширину обводки, что похоже на выбор цвета краски и размера кисти, а затем в последнем бите мы просто говорим обводке.
Теперь мы можем добавить дополнительный мазок кистью, добавив еще одну строку кода lineTo() сразу после первой строки lineTo(). Это должно построить две стороны нашего равностороннего треугольника в форме буквы V.
function drawTriangle() {
ctx.moveTo(200, 50);
ctx.lineTo(100, 200);
ctx.lineTo(300, 200);
ctx.strokeStyle = “#9ecc35”;
ctx.lineWidth = 30;
ctx.stroke();
В этот момент мы могли бы добавить еще одну функцию lineTo(), но JavaScript делает это немного проще. Все, что нам нужно сделать, это, по сути, сказать ему, что это «путь» и что мы хотим закрыть этот «путь», и компьютер сделает всю работу за нас!
function drawTriangle() {
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(100, 200);
> ctx.lineTo(300, 200);
ctx.closePath();
ctx.strokeStyle = “#9ecc35”;
ctx.lineWidth = 30;
ctx.stroke ();
Теперь, имея еще всего 2 строки JavaScript, мы можем заполнить наш треугольник цветом по нашему выбору, а затем мы можем сесть и подумать, равен ли каждый из 3 внутренних углов ровно 60 градусам… Возможно, в будущем мы будем использовать немного математики. чтобы быть уверенным, что это точно математически пропорционально.
function drawTriangle() {
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(100, 200);
> ctx.lineTo(300, 200);
ctx.closePath();
ctx.strokeStyle = “#9ecc35”;
ctx.lineWidth = 30;
ctx.stroke ();
ctx.fillStyle = “#54b958”;
ctx.fill();
}
Помните наши случайные функции? Да, мы можем добавить несколько из них прямо туда, чтобы заменить некоторые числа и сделать наш простой правильный многоугольник уже не таким простым!
function drawTriangle() {
ctx.beginPath();
ctx.moveTo(250, getRandomNum(50, 250));
ctx.lineTo(150, 150) );
ctx.lineTo(350, 150);
ctx.closePath();
ctx.strokeStyle = getRandomRGBA(0, 256);
ctx.lineWidth = 30;
ctx.stroke();
ctx.fillStyle = getRandomRGBA(0, 256);
ctx.fill();
Обязательно поэкспериментируйте и используйте еще несколько случайных функций, чтобы увидеть, что вы можете создать.
ctx.beginPath();
ctx.moveTo(250, getRandomNum(50, 250));
ctx.lineTo(getRandomNum(50, 250), getRandomNum(50, 150) ));
ctx.lineTo(getRandomNum(150, 350), getRandomNum(50, 250));
ctx.closePath();
На этом этапе вы можете создать что-то довольно круто выглядящее, например, что-то, что я мог видеть в калейдоскопе или солнце, сияющее сквозь мыльный пузырь?
Поскольку мы используем эти случайные числа из случайных функций, каждый раз, когда вы запускаете свое веб-приложение JavaScript, оно каждый раз будет генерироваться по-разному. Некоторые люди назвали бы это «генеративным искусством», возможно, в зависимости от вашего определения искусства. В любом случае, обязательно найдите время, чтобы поменять местами свои случайные функции для различных чисел и посмотреть, что вы можете создать!
И… это конец учебника по кодированию на JavaScript — часть 3
