鼠標移動時背景顏色發生變化

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

更改此行：

//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))'; 

Answer 2

只需在所有三種顏色的位置使用單個變量，即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轉換為灰度的方法，但在這種情況下均不適用。 在這里看看所有這些： 灰度算法
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(", ") ，這只是將用逗號分隔的值連接在一起，以避免手動編寫逗號。