鼠标移动时背景颜色变化

Question

我在 codepen 上找到了这支笔。我想使用这种效果，但是是灰度的。 有人可以帮我吗？ 提前致谢！

// Create a HTML div Element called 'page'
var page = document.createElement('DIV');
// Gives the page variable full height 
page.style.height = '100vh';

// Applies the page element to the document(web page)
document.body.appendChild(page); 

//Creates variables for x & y for know where our mouse is
//x is for horizontal values, and y for vertical ones
var x = 0;
var y = 0;

// Add Event Listener for page. Listens for any mouse movement
// inside the page element. If found, run function below
page.addEventListener('mousemove', function(event) {
  //Takes the mouse movement we listened for and saves it into two variables
  x = event.clientX;
  y = event.clientY;
  
  //Here we set the background color to the x & y value that the mouse has over the web page. See css part for rgb explaination
  page.style.backgroundColor = 'rgb(' + x + ', ' + y + ', 100)'; 
  //By writing variable + ', ' we combine the value with text to make it write like rgb(x, y, 100); when sent to style part (css)
  //Adds a text element to the page. It writes out the x & y value
  page.textContent = x + ', ' + y;
});

// Find the css element called 'box' to use in future
var box = document.getElementById('box');

//Function for a box that follows the mouse around
var mousebox = function() {
  //Calls the css code to push the box away from the left & top
  //the same x & y values that the mouse has
  box.style.left = x + 'px';
  box.style.top = y + 'px';
  
}  

// Find the css element called 'rbox' to use in future
var rbox = document.getElementById('rbox'); 

//Variable to hold our current angle/degree of rbox
var degree = 0;
//Setup a rotating box in the center
var rotatebox = function(){
  
  //Adds rotation, but makes it go (357, 358, 359, 0, 1, 2)
  degree = (degree + 1) % 360;
  
  //adds the current rotation to the rbox
  rbox.style.transform = 'rotate('+degree+'deg)'; 
  
  //Pushes the box from left & top by half of window width & height
  rbox.style.left = window.innerWidth / 2 + 'px';
  rbox.style.top = window.innerHeight / 2 + 'px';
}

//Sets up an update interval of how often both boxes happen. Number is in milliseconds so 100ms = 10 times per second
setInterval(mousebox,100);
setInterval(rotatebox,10);

body {
  margin: 0; /* Removes any margin so anything within the body fills the space */
}

/* Box that will follow the mouse around */
#box {
  position: absolute; /* Allows us to move it around */
  color: #FFF; /* Makes the text white */
  font-size: 24px; /* Makes the box text larger (24 pixels tall) */
  transition: ease-out 1s; /* Gives a smooth movement following the box, s for seconds. Feel free to increase lower */
}

/* Rotating box that will spin in the middle */
#rbox {
  position: absolute; /* Allows us to move it around */
  width: 50px; /* Size with width/height */
  height: 50px;
  background-color: #FFF; /* Makes the background white, if removed its transparent. If all are the same you can write just 3, but otherwise hexagon letter/numbers come in 6 */
  /* When talking RGB colour, 0 or 00 gives no colour (black) while 255 or FF is full colour */
  /* RGB: For red #FF0000 , green is #00FF00 , and blue is #0000FF. Inbetween these you can mix and match*/
 /* Use to find specific colours you like https://www.w3schools.com/colors/colors_picker.asp */
  
  color: #000; /* Text in the box is black */
  text-align: center; /* Puts the text in middle  */
  font-size: 36px; /* Text size, fits the size we set above */
}

<div id="box">Hello!</div>

<div id="rbox">:)</div>

Answer 1

只需在所有三种颜色的位置使用一个变量，即 rgb(x, x, x)

var page = document.createElement('DIV');

page.style.height = '100vh';

document.body.appendChild(page);

var x = 0;
var y = 0;

page.addEventListener('mousemove', function(event) {

  x = event.clientX;
  y = event.clientY;

  // ==================   Solution  ======================
  
  Gray = y; // or Math.min(x, y) or (x + y) / 2

  color = [Gray, Gray, Gray].join(", ");

  page.style.backgroundColor = 'rgb(' + color + ')';
  
  // =====================================================

  page.textContent = x + ', ' + y;
});


var box = document.getElementById('box');


var mousebox = function() {
  box.style.left = x + 'px';
  box.style.top = y + 'px';

}

var rbox = document.getElementById('rbox');

var degree = 0;

var rotatebox = function() {
  degree = (degree + 1) % 360;

  rbox.style.transform = 'rotate(' + degree + 'deg)';

  rbox.style.left = window.innerWidth / 2 + 'px';
  rbox.style.top = window.innerHeight / 2 + 'px';
}

setInterval(mousebox, 100);
setInterval(rotatebox, 10);

body {
  margin: 0;
  /* Removes any margin so anything within the body fills the space */
}


/* Box that will follow the mouse around */

#box {
  position: absolute;
  /* Allows us to move it around */
  color: #FFF;
  /* Makes the text white */
  font-size: 24px;
  /* Makes the box text larger (24 pixels tall) */
  transition: ease-out 1s;
  /* Gives a smooth movement following the box, s for seconds. Feel free to increase lower */
}


/* Rotating box that will spin in the middle */

#rbox {
  position: absolute;
  /* Allows us to move it around */
  width: 50px;
  /* Size with width/height */
  height: 50px;
  background-color: #FFF;
  /* Makes the background white, if removed its transparent. If all are the same you can write just 3, but otherwise hexagon letter/numbers come in 6 */
  /* When talking RGB colour, 0 or 00 gives no colour (black) while 255 or FF is full colour */
  /* RGB: For red #FF0000 , green is #00FF00 , and blue is #0000FF. Inbetween these you can mix and match*/
  /* Use to find specific colours you like https://www.w3schools.com/colors/colors_picker.asp */
  color: #000;
  /* Text in the box is black */
  text-align: center;
  /* Puts the text in middle  */
  font-size: 36px;
  /* Text size, fits the size we set above */
}

<div id="box">Hello!</div>

<div id="rbox">:)</div>

解释

1. 有多种方法可以将 RGB 转换为灰度，但在这种情况下均不适用。在这里查看所有这些：Gray Scale Algorithms
2. 使用单个变量，例如 rgb(y, y, y)，因为灰度颜色通常如下所示：#d3d3d3、rgb(63,63,63) 等。所有通道中的单个值
3. 如果你想同时使用这两个变量，你可以做Math.min(x, y) or (x + y) / 2，然后将它传递给一个变量Gray，然后可以这样设置：rgb(Gray, Gray, Gray)
4. color = [Gray, Gray, Gray].join(", ")，这只是将逗号分隔的值连接起来，以避免手动编写逗号。

Answer 2

改变这一行：

//Here we set the background color to the x & y value that the mouse has over the web page. See css part for rgb explaination
page.style.backgroundColor = 'rgb(' + x + ', ' + y + ', 100)'; 

到这里

page.style.backgroundColor = 'grayscale(rgb(' + x + ', ' + y + ', 100))';