Как я могу изменить цвета этих радиальных часов в JavaScript?

1

Я нашел часы JavaScript в Интернете. Я хочу изменить цвет кругов, но не могу понять, как это сделать.

Это часы: https://codepen.io/Escu/pen/wMZpQz

Это код, в котором рисуются круги:

Object.keys(circles).forEach((k, i) => {
    ctx.beginPath();
    circles[k].update(times[k]);
    ctx.strokeStyle = "hsl(" + k.charCodeAt(0) * i + ", 50%, 50%)";
    ctx.stroke();
});

Как изменить цвета кругов? Например, часы должны быть красными, зелеными и зелеными секундами.

Теги:

1 ответ

1
Лучший ответ

Вы можете попробовать такой подход:

var colors = [0, 77, 166];

//update circles, set their color, draw
Object.keys(circles).forEach((k, i) => {
    ctx.beginPath();
    circles[k].update(times[k]);
    // hsl(hue, saturation, lightness)
    ctx.strokeStyle = "hsl(" + colors[i] + ", 50%, 50%)";
    ctx.stroke();
});

Вы можете использовать другие цветовые функции, например:

var colors = ["blue", "#ff0000", "rgb(200, 0, 200)"];

//update circles, set their color, draw
Object.keys(circles).forEach((k, i) => {
    ctx.beginPath();
    circles[k].update(times[k]);
    ctx.strokeStyle = colors[i];
    ctx.stroke();
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню