Учебное пособие по программированию на JavaScript — Часть 8 — Многоугольники и вулканы!

В Части 7 мы сделали некоторые случайные и автоматические эффекты кисти для нашего текста и следовали за курсором мыши. Давайте посмотрим, как рисовать одну из моих любимых вещей — рисовать многоугольники!

Давайте углубимся и закомментируем вызовы функций drawText() и drawMouseCoordinates() в нашей функции draw(), а затем добавим новый вызов функции drawPolygon(), как показано ниже.

drawPolygon();
//drawText();
//drawMouseCoordinates(mouseX, mouseY)

Затем мы можем поместить следующий код JavaScript прямо под нашей функцией draw(), чтобы создать наш простой выпуклый четырехугольник или то, что вы могли бы назвать равнобедренной трапецией, рисуя от точки к точке.

function drawPolygon() {
    ctx.fillStyle = '#f89f44';
    
    ctx.beginPath();
    ctx.moveTo(280, 200);
    ctx.lineTo(200, 300);
    ctx.lineTo(400, 300);
    ctx.lineTo(320, 200);
    ctx.closePath();
    
    ctx.fill();
}

Вроде мило, да? Почти как маленький оранжевый вулкан... На самом деле, давайте добавим нашему маленькому вулкану облако дыма, добавив пару строк.

function drawPolygon() {
  
    ctx.shadowColor = "#ccc";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetY = -150;

Параметр shadowOffsetY указывает холсту рисовать тень, но смещать ее от нашего вулкана, а отрицательное число по оси Y должно смещать ее вверх.

Кроме того, мы можем вернуться к началу нашего кода и установить цвет фона холста на приятный светло-голубой, что даст нам немного сцены природы.

ctx.fillStyle = "#88d3ff";

Неплохо, но разве мы не хотим, чтобы он немного ожил? Конечно… давайте продолжим и воспользуемся тем, что мы делали ранее, для своего рода случайного блуждания по верхней части нашего вулкана, чтобы смоделировать его извержение и изменение формы.

var upperLeftX = 280;
var upperLeftY = 200;
var upperRightX = 320;
var upperRightY = 200;
var upperRightX = 200;
function drawPolygon() {
    ctx.shadowColor = "#ccc";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetY = -150;
    ctx.fillStyle = '#f89f44';
    
    ctx.beginPath();
    ctx.moveTo(upperLeftX, upperLeftY);
    ctx.lineTo(200, 300);
    ctx.lineTo(400, 300);
    ctx.lineTo(upperRightX, upperRightY);
    ctx.closePath();
    
    ctx.fill();
    
    upperLeftX += getRandomNum(-2, 3);
    upperLeftY += getRandomNum(-2, 3);
    upperRightX += getRandomNum(-2, 3);
    upperRightY += getRandomNum(-2, 3);
  }

Эммм… ладно, движение вроде крутое, но форма начинается как какой-то странный самопересекающийся многоугольник…

Тьфу… После нескольких часов поиска в нашем коде… Я наконец нашел проблему! Вы? Похоже, мы случайно поместили переменную upperRightX дважды с двумя разными значениями!

var upperRightX = 320;
var upperRightY = 200;
var upperRightX = 200;

Ой! Чтобы избежать этого (переобъявления) в будущем, мы собираемся изменить наше ключевое слово «var» на «let» во всем нашем коде, так что, если мы попытаемся создать или объявить переменную во второй раз, это будет, по крайней мере, более понятно. что есть ошибка или что-то в этом роде, а мы, возможно, думаем, что неправильно нарисовали форму.

let upperLeftX = 280;
let upperLeftY = 200;
let upperRightX = 320;
let upperRightY = 200;

Намного лучше, но нужно больше огня, верно?! В конце концов, это должен быть вулкан, так что… Давайте создадим градиентную заливку, которая позволит нам придать стилю заливки два цвета, а затем он будет плавно переходить от одного цвета к другому (в нашем случае от красного к оранжевому).

// context.createLinearGradient(x0,y0,x1,y1);
let grd = ctx.createLinearGradient(300, 150, 300, 300);
grd.addColorStop(0, "#ff0000");
grd.addColorStop(1, "#f89f44");
ctx.fillStyle = grd;

Ну вот! Если я прищурюсь достаточно сильно, я почти увижу, как лава извергается в сторону вулкана. Круто, да?! (Я имею в виду… э-э… скорее очень горячо!)

Теперь я настоятельно рекомендую вам поэкспериментировать с градиентной заливкой, чтобы лучше понять ее. Имейте в виду, что вы задаете две координатные точки, каждая из которых имеет координаты X, Y, и она заполняет градиент в форме на основе этих начальных и конечных точек.

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

Хорошо… это конец учебника по кодированию JavaScript — часть 8.