В части 9 мы начали использовать радиальные градиентные заливки и использовали то, что мы узнали до сих пор, чтобы создать плавающий танцующий случайный квадрат с тенями. Давайте немного углубимся в линейные и радиальные градиентные заливки, чтобы закрепить некоторые из того, что мы рассмотрели ранее в этих вещах.
Сначала закомментируйте вызовы функций drawRandomSquare() и
drawMouseCoordinates() в функции draw(). Затем добавьте новый вызов функции в нижней части функции draw() с именем drawColorStops().
Затем под всей функцией draw() давайте создадим функцию drawColorStops() для создания радужного линейного градиента на нашем холсте, вот так. Обратите внимание, как цветовые ограничители делят полную ширину на 1, поэтому 0,5 будет на половине ширины нашего холста, где лежит зеленый цвет.
function drawColorStops() {
// ROYGBIV = Red, orange, yellow, green, blue, indigo, violet
let grd = ctx.createLinearGradient(0, 0, 600, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.125, "red");
grd.addColorStop(0.25, "orange");
grd.addColorStop(0.375, "yellow");
grd.addColorStop(0.5, "green");
grd.addColorStop(0.625, "blue");
grd.addColorStop(0.75, "indigo");
grd.addColorStop(0.875, "violet");
grd.addColorStop(1, "black");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 600, 300);
}
Теперь, если мы хотим рандомизировать нашу радугу, нам действительно нужна новая функция случайных чисел, потому что, если вы помните, наша функция getRandomNum() возвращает целое число (или целое число). Итак, нам нужна новая функция, которая вычисляет случайные десятичные числа (или числа с плавающей запятой), чтобы получить доли от 1, поскольку это то, что нужно для цветовых остановок.
function getRandomDecimal(min, max) {
// Random decimal number between min and max.
return ((Math.random() * (max - min)) + min).toFixed(3);
}
Итак, чтобы провести небольшое тестирование, мы можем использовать предупреждение для отображения числа из функции getRandomNum() между нулем и единицей. Обратите внимание, что каждый раз, когда вы обновляете страницу, в окне предупреждения всегда отображается ноль.
alert( getRandomNum(0, 1) );
Хорошо, теперь давайте переключим окно предупреждения, чтобы использовать нашу новую функцию getRandomDecimal() с тем же минимальным и максимальным диапазоном.
alert( getRandomDecimal(0, 1) );
Отлично, теперь мы получаем число с тремя знаками после запятой, которое нужно для цветовых остановок. Итак, прежде чем мы вставим все случайные десятичные числа, давайте прокомментируем эту строку кода в нашей функции draw(), чтобы мы могли видеть каждый новый линейный градиент за раз.
//window.requestAnimationFrame(draw);
Тогда давайте продолжим реализовывать нашу новую функцию drawColorStops(), используя нашу новую функцию случайного десятичного числа, вот так.
function drawColorStops() {
// ROYGBIV = Red, orange, yellow, green, blue, indigo, violet
let grd = ctx.createLinearGradient(0, 0, 600, 0);
grd.addColorStop(0, "black");
grd.addColorStop(getRandomDecimal(0, 0.125), "red");
grd.addColorStop(getRandomDecimal(0.125, 0.25), "orange");
grd.addColorStop(getRandomDecimal(0.25, 0.375), "yellow");
grd.addColorStop(getRandomDecimal(0.375, 0.5), "green");
grd.addColorStop(getRandomDecimal(0.375, 0.625), "blue");
grd.addColorStop(getRandomDecimal(0.375, 0.75), "indigo");
grd.addColorStop(getRandomDecimal(0.375, 1), "violet");
grd.addColorStop(1, "black");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 600, 300);
}
Теперь давайте сделаем его еще более случайным, заставив каждую цветовую остановку получать любое случайное десятичное число от нуля до единицы.
function drawColorStops() {
// ROYGBIV = Red, orange, yellow, green, blue, indigo, violet
let grd = ctx.createLinearGradient(0, 0, 600, 0);
grd.addColorStop(0, "black");
grd.addColorStop(getRandomDecimal(0, 1), "red");
grd.addColorStop(getRandomDecimal(0, 1), "orange");
grd.addColorStop(getRandomDecimal(0, 1), "yellow");
grd.addColorStop(getRandomDecimal(0, 1), "green");
grd.addColorStop(getRandomDecimal(0, 1), "blue");
grd.addColorStop(getRandomDecimal(0, 1), "indigo");
grd.addColorStop(getRandomDecimal(0, 1), "violet");
grd.addColorStop(1, "black");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 600, 300);
}
Теперь, чтобы придать ему больше формы, мы можем переключить его на радиальный градиент, изменив всего одну строку JavaScript, как показано ниже.
//let grd = ctx.createLinearGradient(0, 0, 600, 0); let grd = ctx.createRadialGradient(300, 150, 0, 300, 600, 600);
И… если вы хотите вернуть значения разделенных десятичных дробей…
grd.addColorStop(getRandomDecimal(0, 0.125), "red"); grd.addColorStop(getRandomDecimal(0.125, 0.25), "orange"); grd.addColorStop(getRandomDecimal(0.25, 0.375), "yellow"); grd.addColorStop(getRandomDecimal(0.375, 0.5), "green"); grd.addColorStop(getRandomDecimal(0.375, 0.625), "blue"); grd.addColorStop(getRandomDecimal(0.375, 0.75), "indigo"); grd.addColorStop(getRandomDecimal(0.375, 1), "violet");
Или… перемещайтесь по разным позициям радиального градиента…
Или… изменить порядок цветов, чтобы приблизиться к настоящей радуге…
grd.addColorStop(getRandomDecimal(0, 0.125), "violet"); grd.addColorStop(getRandomDecimal(0.125, 0.25), "indigo"); grd.addColorStop(getRandomDecimal(0.25, 0.375), "blue"); grd.addColorStop(getRandomDecimal(0.375, 0.5), "green"); grd.addColorStop(getRandomDecimal(0.375, 0.625), "yellow"); grd.addColorStop(getRandomDecimal(0.375, 0.75), "orange"); grd.addColorStop(getRandomDecimal(0.375, 1), "red");
И… это конец Учебника по кодированию на JavaScript — Часть 10.
Надеюсь, это помогло вам понять, как остановить градиент цвета холста JavaScript и генерировать случайные десятичные числа. Как всегда, не забудьте потратить несколько минут и немного повеселиться, изменяя цвета и числа, чтобы увидеть, что вы можете создать, используя в основном только текстовый файл и веб-браузер. Небольшой эксперимент может помочь с пониманием!
Если вам понравилась эта статья или если эта статья вам вообще помогла, рассмотрите возможность подписки, аплодисментов, комментариев или щелкните здесь, чтобы купить мне кофе (любое из этих действий будет очень признательно и мотивирует!)
