hue變量和hsl樣式中的百分比控制顏色。

要從RGB顏色150,150,200開始，將色調(diào)設(shè)置為240，將飽和度(hsl中的第二個參數(shù))設(shè)置為25%，將亮度(第三個參數(shù))設(shè)置為78%。

要以RGB顏色190,160,200結(jié)束，您需要循環(huán)，直到色相值達(dá)到285為止。您還需要一個飽和度值的變量，因為它應(yīng)該以20%結(jié)束。

HSL colors

或者，使用RGB顏色代替HSL顏色...

編輯：點(diǎn)擊

如果你想停止這個間隔，你需要把它的句柄存儲在一個變量中：

var interval = window.setInterval(blank, 50);然后您可以使用它來停止時間間隔：

window.clearInterval(interval);我不知道為什么你想用隨機(jī)值來改變顏色。為了簡單起見，我在這個例子中用一個固定值替換它：

var hue = 240;

var sat = 25;

function blank() {

context.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 80%)';

context.fillRect(0, 0, context.canvas.width, context.canvas.height);

hue += 0.9;

sat -= 0.1;

if (hue > 285) window.clearInterval(interval);

}

var interval = window.setInterval(blank, 50);編輯：點(diǎn)擊

如果要反復(fù)淡入淡出而不是以特定顏色結(jié)束，請為該方向創(chuàng)建一個變量，并在到達(dá)每個結(jié)束顏色時對其進(jìn)行更改：

var hue = 240;

var sat = 25;

var dir = 1;

function blank() {

context.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 80%)';

context.fillRect(0, 0, context.canvas.width, context.canvas.height);

hue += 0.9 * dir;

sat -= 0.1 * dir;

if (hue <= 240 || hue >= 285) dir = -dir;

}

window.setInterval(blank, 50);

總結(jié)

以上是生活随笔為你收集整理的html用变量存储颜色信息,我如何使用间隔循环修改HTML Canvas颜色？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。