Генератор случайных цветов
Описание проблемы
У меня есть следующая функция, которая создает полилинию с заданным цветом. Мне нужно заменить цвет на случайно генерируемый цвет. Вот код:
document.overlay = GPolyline.fromEncoded({
color: "#0000FF",
weight: 10,
points: encoded_points,
zoomFactor: 32,
levels: encoded_levels,
numLevels: 4
});
Как я могу это сделать? Какие шаги необходимо предпринять для генерации случайного цвета и подстановки его в данную функцию? Какие возможные решения могли бы помочь в этой задаче?
5 ответ(ов)
Для замены "#0000FF"
на использование функции getRandomColor()
, вам нужно обновить код внутри функции setRandomColor()
. В приведенном коде уже используется getRandomColor()
, чтобы задать случайный цвет фона для элемента с id colorpad
.
Если вы просто хотите показать, как использовать getRandomColor()
, то данный код уже правильно это делает.
Вот итоговый пример кода с комментариями, чтобы было более понятно:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">
</div>
<button onclick="setRandomColor()">Random Color</button>
<script>
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color; // Генерация случайного шестнадцатеричного цвета
}
function setRandomColor() {
// Установка случайного цвета в качестве фона для элемента с id colorpad
$("#colorpad").css("background-color", getRandomColor());
}
</script>
Теперь, когда вы нажмете кнопку "Random Color", фон элемента colorpad
будет меняться на случайный цвет, который генерируется с помощью функции getRandomColor()
.
Сомневаюсь, что что-то будет быстрее или короче, чем этот вариант:
"#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0")
Этот код генерирует случайный цвет в шестнадцатеричном формате, используя побитовые операции и функции для работы с числами. Он быстро создает строку формата #RRGGBB
, где RR
, GG
, и BB
— случайные значения. Если вы ищете более короткий синтаксис или оптимизацию, дайте знать!
Вы можете также использовать HSL, который поддерживается всеми хорошими браузерами (http://caniuse.com/#feat=css3-colors).
Вот пример функции для генерации случайного цвета в формате HSL:
function randomHsl() {
return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}
Обратите внимание, что эта функция будет генерировать только яркие цвета. Вы можете экспериментировать с яркостью, насыщенностью и альфа-каналом.
Если вы предпочитаете синтаксис ES6, вот аналогичная функция:
// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`
Не забудьте в дальнейшем поиграть с параметрами для разнообразия цветов!
Нет необходимости использовать хэш из шестнадцатеричных букв. JavaScript может сделать это сам:
function get_random_color() {
function c() {
var hex = Math.floor(Math.random() * 256).toString(16);
return ("0" + String(hex)).substr(-2); // дополнение нулём
}
return "#" + c() + c() + c();
}
Этот код генерирует случайный цвет в формате шестнадцатеричного кода. Функция get_random_color
вызывает вложенную функцию c
, которая генерирует две цифры в шестнадцатеричном формате. В итоге функция собирает цвет в формате #RRGGBB
, где RR
, GG
и BB
— это случайные значения канала красного, зеленого и синего соответственно.
Этот код генерирует случайный шестнадцатеричный цвет в формате #RRGGBB
.
Давайте разберемся, как это работает:
Math.random()
— генерирует случайное число от 0 до 1.toString(16)
— преобразует это число в строку в шестнадцатеричном формате. Однако, поскольку результат может быть меньше 6 символов, мы добавляем"000000"
, чтобы обеспечить достаточную длину.substring(2, 8)
— извлекает подстроку, начиная с третьего символа (индекс 2) и заканчивая на седьмом символе (индекс 8), чтобы получить только 6 символов цвета.'#' +
— добавляет символ#
в начале, чтобы соответствовать формату CSS для цветовых кодов.
В результате мы получаем случайный цвет в шестнадцатеричном формате, который можно использовать, например, для задания цвета фона на веб-странице.
Пример использования:
let randomColor = '#' + (Math.random().toString(16) + "000000").substring(2, 8);
console.log(randomColor); // Выведет что-то вроде: #a3c2f2
Надеюсь, это поможет разобраться!
Генерация случайного числа в диапазоне между двумя числами в JavaScript
Генерация случайной строки/символов в JavaScript
Генерация случайных целых чисел в JavaScript в заданном диапазоне
Как перемешать (сделать случайным) массив в JavaScript?
Программное осветление или затемнение HEX-цвета (или RGB) и смешивание цветов