Продолжая прямо с того места, где мы остановились в части 1, чтобы добавить еще больше удивительной случайности и немного уборки.
Прежде чем мы перейдем к тому, как рандомизировать больше вещей, чем просто координаты x по горизонтали и y по вертикали, а также высоту и ширину прямоугольника, давайте рассмотрим пару лучших практик.
Хорошей практикой считается добавление строки текста между тегами холста на тот случай, если веб-браузер пользователя не поддерживает элемент холста.
‹canvas id=”myCanvas” width=”800’ height=”600’›
Ваш браузер не поддерживает тег canvas HTML5.
‹/canvas›
На самом деле, в зависимости от вашей целевой аудитории, менее 3% веб-браузеров не будут отображать ваш элемент холста, и с каждым годом это число становится все меньше и меньше. Если вы когда-либо сомневались в использовании определенных тегов или элементов на своей веб-странице или в веб-приложении, вы можете использовать такие веб-сайты, как caniuse.com. Если мы хотим конкретно проверить тег canvas, то можем перейти по следующей ссылке: https://caniuse.com/canvas
Еще одна лучшая практика в настоящее время, когда вы перемещаете объекты или анимируете их, например, мы перемещаем нашу кисть и рисуем прямоугольники, — это запрашивать скорость анимации. Таким образом, вместо функции drawLoop() с таймером setInterval(), запускающимся каждые 50 миллисекунд, мы вместо этого «спросим» веб-браузер пользователя, какая частота кадров анимации является наиболее подходящей для запуска нашей анимации.
Поскольку мы хотим отключить функцию drawLoop(), мы можем закомментировать ее, чтобы сообщить браузеру, что это просто наши комментарии или примечания, а не реальный код JavaScript для выполнения. Мы делаем это, добавляя косую черту (обычно на вашей клавиатуре над клавишей вопросительного знака) и символы звездочки/звездочки (обычно над цифрой 8 на вашей клавиатуре). На большинстве клавиатур вы можете нажать клавишу SHIFT и клавишу вопросительного знака, чтобы ввести косую черту, и клавишу SHIFT и клавишу с цифрой 8, чтобы ввести символ звездочки.
/*function drawLoop() {
window.setInterval(() =› {
drawRect()
}, 50);
}
drawLoop();*/
Следующее, что является хорошей практикой, — это использовать и инициализировать функцию или «инициализировать» для краткости. Это так же, как это звучит, это то, что браузер будет делать изначально или в первую очередь. Итак, мы можем создать функцию init(), которая будет выполняться перед любыми другими функциями, а затем добавить однострочный комментарий/примечание с двойной косой чертой.
function init() {
// 2D Canvas запрашивает частоту кадров (~60 кадров в секунду).
window.requestAnimationFrame(drawRect);
}
Как видите, мы сделали комментарий к коду, объясняющий, что мы используем двухмерный холст и что веб-браузер обычно запрашивает частоту кадров 60 кадров в секунду (fps). Это напоминает нам, что если мы что-то двигаем, оно, скорее всего, будет анимироваться примерно с этой скоростью. Теперь, чтобы запустить эту функцию init(), нам нужно вызвать ее, добавив прямо над закрывающим тегом ‹/script›, как показано ниже.
init();
‹/script›
Теперь, если вы запустите свое веб-приложение JavaScript, вы заметите, что оно рисует только один квадрат, а затем останавливается. Это потому, что нам нужно не просто запустить его изначально, но нам нужно продолжать анимировать его, поэтому каждый раз, когда он рисует прямоугольник, мы хотим, чтобы он рисовал еще один, поэтому мы добавляем эту новую строку внизу drawRect( ) функция.
function drawRect() {
…
window.requestAnimationFrame(drawRect);
}
Хорошо, теперь, если вы обновите свой браузер и запустите его, вы можете даже заметить, что анимация или рисование прямоугольников немного «плавнее».
Хорошо, теперь кое-что повеселее… Больше случайности.
Давайте сделаем несколько случайных цветов, это звучит довольно весело. Давайте начнем с создания новой функции с соответствующим названием randomColor, затем давайте сделаем комментарий с двойной косой чертой, как и раньше, чтобы добавить для себя примечание о том, что это конкретное значение цвета компьютера находится в так называемом шестнадцатеричном формате значения цвета. Итак, точно так же, как у шестиугольника 6 сторон, о чем вы наверняка узнали в школе, шестнадцатеричное значение цвета имеет длину 6 символов.
function randomColor() {
// Генерировать случайный шестнадцатеричный цвет.
var randomNum = Math.floor(Math.random()*16777215).toString(16);
вернуть «#» + randomNum;
}
Не беспокойтесь о понимании каждой отдельной части этого, тем не менее, мы доберемся до этого достаточно скоро. Прямо сейчас достаточно понять, что эта новая функция будет выбирать случайный цвет из примерно 16,7 миллионов возможных цветов и «возвращать» или выводить обратно нам шестнадцатеричное значение цвета, которое будет выглядеть примерно так: #0099cc или # 669977 или #333333 и так далее.
Чтобы использовать нашу новую функцию randomColor(), нам нужно всего лишь заменить цветовую линию стиля штриха: ctx.strokeStyle = «#fc636c»;
Теперь, если вы снова запустите свой код JavaScript с этой новой строкой, вы должны увидеть случайные цвета для границ наших прямоугольников.
ctx.strokeStyle = randomColor();
Крутые, случайные цвета могут быть довольно забавными и иметь безграничные возможности в сочетании с другими интересными вещами. Что еще мы можем сделать случайным?
Как насчет того, чтобы сделать ширину линии границы или штриха случайной, но в этом случае нам нужен очень ограниченный диапазон, из которого будет генерироваться случайное число. Давайте добавим эту новую функцию ниже нашей функции randomColor().
function getRandomNum(min, max) {
// Случайное целое число между минимальным (включительно) и максимальным (не включая).
return Math.floor(Math.random() * ( макс - мин)) + мин;
В этом случае у нас есть функция getRandomNum(), в которой в скобках указано минимальное и максимальное значения, что означает, что мы укажем минимальный и максимальный диапазон чисел, внутри которых должно находиться случайное число.
Итак, в этом случае мы будем запускать или вызывать функцию с минимумом 1 и максимумом 5, но у нас есть комментарий, который напоминает нам, что это минимум включает, а максимум исключает. Это означает, что следующий код JavaScript вернет нам целое число (целое число) 1, 2, 3 или 4… но не 5.
getRandomNum(1, 5)
Итак, если мы изменим строку кода, устанавливающую для lineWidth значение 3, на следующую строку, мы должны увидеть, что прямоугольники теперь имеют случайную ширину линий в этом диапазоне для своих границ.
ctx.lineWidth = getRandomNum(1, 5);
Обязательно найдите минутку и поиграйте с числами и посмотрите, какие эффекты вы можете создать в своей простой картине, похожей на моушн-арт.
Но как насчет заливки внутреннего прямоугольника цветом RGBA, который создает альфа-прозрачность или полупрозрачную голубоватую заливку?
Конечно, нет проблем, мы можем использовать многое из того, что узнали, для создания новой функции для RGBA (красная, зеленая, синяя и альфа-прозрачность).
function getRandomRGBA(min, max) {
// Случайные числа RGB между минимальным (включительно) и максимальным (не включая).
var red = Math.floor(Math.random() * (макс. - мин.)) + мин.;
var green = Math.floor(Math.random() * (max - min)) + min;
var blue = Math.floor(Math.random () * (max - min)) + min;
return "rgba(" + красный + "," + зеленый + "," + синий + ", 0,25)";
Так близко к нашей функции getRandomNum(), но с некоторыми изменениями, чтобы предоставить случайное число для каждого цветового канала, а затем вернуть отформатированную строку текста обратно.
Теперь мы используем или вызываем функцию с минимальным и максимальным значением, как и раньше, чтобы установить стиль заливки прямоугольника. То, как значения цвета RGB работают на компьютерах, мы установили максимум до 255, что не является идеальным кодом, но на данный момент достаточно близко. Лучше итерировать свой код, сохранять темп, а позже вы всегда можете вернуться, чтобы улучшить свой код, оптимизируя и исправляя проблемы в вашем коде, которые часто называют «программными ошибками».
ctx.fillStyle = getRandomRGBA(0, 255);
ctx.fillRect(randomX, randomY, randomWidth, randomHeight);
Следует отметить, что, поскольку мы получаем случайное число с максимальным исключением, оно на самом деле никогда не даст нам значение 255, поэтому, чтобы получить более точный диапазон случайных значений от 0 до 255, мы могли бы ввести 256.
ctx.fillStyle = getRandomRGBA(0, 256);
И… это конец учебника по кодированию JavaScript — часть 2
