我在codepen上找到了这支笔。我想使用这种效果，但是在灰度级。 谁能帮助我？ 提前谢谢！
date// 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 */
}
答案 0 :(得分：0)
更改此行：
//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))';
答案 1 :(得分：0)
只需在所有三个颜色的位置使用单个变量，即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>
解释
rgb(y, y, y)是有效的，因为灰度颜色通常如下所示：＃d3d3d3，rgb（63,63,63）等。所有通道中的单个值Math.min(x, y) or (x + y) / 2然后将其传递给变量Gray，然后可以这样设置：rgb(Gray, Gray, Gray) color = [Gray, Gray, Gray].join(", ")，这只是加入用逗号分隔的值，以避免手动编写逗号。