背景顏色基礎上的光標位置，特定顏色的光譜

我使用的是JS光標位置的x/y創建的RGB光譜變化顏色的背景：背景顏色基礎上的光標位置，特定顏色的光譜

$(document).mousemove(function(e){ 
var $width = ($(document).width())/255; 
var $height = ($(document).height())/255; 
var $pageX = parseInt(e.pageX/$width,10); 
var $pageY = parseInt(e.pageY/$height,10); 
$("body").css("background-color", "rgb("+$pageX+","+$pageY+","+$pageX+")"); 
});

這就像一個魅力（感謝堆棧溢出！）但我想知道是否可以使用特定的色譜而不是全RGB色譜？即從深紅色變爲淡紅色？我在想這可能會相當複雜，我對JS的理解還是有限的。所以，在我開始困惑之前，這種有限的頻譜/調頻可能嗎？

來源

2014-10-29 AlextheKidd

我認爲它更好地使用HSL。比你可以做一種方式的色調和其他人的飽和度和輕盈。 – 2014-10-29 13:17:48

您可以使用RGB特定顏色：

$("body").css("background-color", "rgb("+($pageX + $pageY)/2+",0,0)");

，或者你使用HSL值：

$("body").css("background-color", "hsl(0, "+($pageX/$width)+"%, "+($pageY/$height)+"%)");

T他的第一個數字是從紅色（0）到藍色（255）的顏色

基本上你可以得到你想要的每個調色板，你只需要找到正確的方程來計算你的色值。所以它更多的是數學/色彩理論問題

來源

2014-10-29 13:33:31 Markai

我對這樣做有點困惑，但我想我已經明白了！非常感謝你！第一次在這個網站上，這是最棒的結果！ – AlextheKidd 2014-10-29 14:20:33

讓你的紅色最大的RGB值（255）。這將創建從蒼白到深紅色的色調。

$("body").css("background-color", "rgb(255,"+$pageY+","+$pageY+")");

繼承人的jsfiddle：

http://jsfiddle.net/n47wr7et/1/

來源

2014-10-29 13:18:39 KoenW

綠色和藍色值都需要相同的值。對不起，我很困惑 – KoenW 2014-10-29 13:23:53

也非常有幫助！ – AlextheKidd 2014-10-29 14:20:55

背景顏色基礎上的光標位置，特定顏色的光譜

回答

相關問題