Question

我正在使用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+")");
});

这就像一个魅力（感谢Stack Overflow！）但我想知道是否可以使用特定的色谱而不是全RGB光谱？即只是从深红色到浅红色的红色？我认为这可能会非常复杂，我对JS的理解充其量也是有限的。所以在我开始迷惑之前，这种有限的光谱/托盘是否可能？

Answer 1

将红色保留在最大RGB值（255）上。这将产生从浅色到深红色的色调。

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

Heres a JsFiddle：

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

Answer 2

您可以将RGB用于特定颜色：

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

或您使用HSL值：

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

第一个数字是从红色（0）到蓝色（255）

的颜色

基本上你可以得到你想要的每个调色板，你只需要找到正确的方程来计算你的颜色值。所以它更像是一个数学/色室理论问题

基于光标位置，特定色谱的背景颜色

2 个答案: