Question

我在线找到了一个JavaScript时钟。我想更改圆圈的颜色，但不知道该怎么做。

这是绘制圆圈的代码：

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

如何更改圆圈的颜色？例如，小时应为红色，分钟应为绿色，秒数应为蓝色。

Answer 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();
});

如何在JavaScript中更改此径向时钟的颜色？

1 个答案: