Javascript 如何有效地实现这一效果？

我正在测试一种像素跟随鼠标的效果。

但我目前的实施非常耗费资源；创建填充页面的div并查询它们以更改颜色

有没有一种方法可以在不占用大量资源的情况下产生类似的效果？ 我的一个想法是在鼠标移动时动态生成div，然后在淡出时删除它们

$（文档）.ready（函数（）{
变量body=$（'body'）；
对于（var i=0；i
正文{
宽度：100%；
保证金：0；
填充：0；
线高：0px；
背景色：#333；
}
.盒子{
显示：内联块；
垂直对齐：顶部；
z指数：-1；
宽度：30px；
高度：30px；
过渡：一切都很轻松；
}
.box:悬停{
过渡：一切顺利；
}
我会创建位于所有对象之上的画布覆盖，并在那里进行渲染，速度应该会更快，因为您不会一直创建和删除DOM对象。

单击下面的运行代码片段，然后在黑色区域中拖动鼠标

总而言之，这是非常有效的。创建像素后，它将添加到
像素
数组中。在
循环
中，对每个像素调用
更新（增量）
函数，如果像素的alpha高于
0
，则返回
true
。一旦像素的alpha降至零以下，它将被删除

这仅使用：


1xHTML元素
2x事件侦听器


var canvas=document.querySelector（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var pixelSize=20；//像素，20像素正方形
var速度=33；//毫秒（1000ms/33ms=~30fps）
变量ttl=2000.0；//毫秒（像素淡出时间）
//像素构造器
功能像素（x、y、大小、rgba）{
如果（！（此像素实例））{
返回新像素（x、y、大小、rgba）；
}
//像素更新功能；每刻度调用一次
函数更新（增量）{
//将该像素的alpha减少delta/ttl；
rgba.a=（rgba.a-（δ/ttl））.toFixed（2）；
//重新绘制此像素
clearRect（x，y，size，size）；
ctx.fillStyle=rgbaStr（rgba）；
ctx.fillRect（x，y，size，size）；
//如果像素alpha仍高于0，则返回true
//当该像素不再可见时返回false（垃圾收集）
返回rgba.a>0；
}
//导出更新功能
this.update=更新；
}
//rgba助手
函数rgba（r，g，b，a）{
返回{r:r，g:g，b:b，a:a}；
}
//将rgba转换为CSS字符串
函数rgbaStr（rgba）{
var args=[rgba.r，rgba.g，rgba.b，rgba.a]；
返回“rgba（“+args.join（“，”+”）”；
}
//所有“活动”像素
var像素=[]；
//像素工厂函数
函数createPixel（x、y、大小、rgba）{
//创建像素
var像素=新像素(
Math.round（x/大小）*大小，//捕捉到网格
数学圆（y/大小）*大小，//捕捉到网格
大小，//像素/网格大小
rgba//rgba颜色
);
//将像素添加到阵列
像素。推送（像素）；
//返回构造像素
返回像素；
}
//环路
函数循环（现在）{
//计算增量
var delta=Date.now（）-now；
//循环通过每个像素
pixels.forEach（函数（pixel，idx）{
//如果像素完全淡出。。。
如果（！像素更新（增量））{
//删除像素
像素拼接（idx，1）；
}
});
//再次循环（基于速度）
setTimeout（loop.bind（null，Date.now（）），速度）；
}
//将画布大小调整为窗口的完整大小
函数大小调整画布（事件）{
ctx.canvas.width=window.innerWidth；
ctx.canvas.height=window.innerHeight；
}
//设置
函数init（）{
//设置画布大小
调整画布的大小（）；
//调整窗口大小时调整画布大小
addEventListener（“调整大小”，调整画布大小）；
//在mousemove上创建像素
canvas.addEventListener（“mousemove”，函数（事件）{
createPixel(
event.clientX，//鼠标x位置
event.clientY，//鼠标y位置
pixelSize，//上面定义的pixelSize
rgba（255,0,0,1）//从100%红色开始
);
});
//开始循环
循环（Date.now（））；
}
//开始一切
init（）
html，正文{
宽度：100%；
身高：100%；
保证金：0；
}
身体{
背景色：黑色；
颜色：白色；
}
您必须使用DOM吗？为什么不使用canvas/webGL或SVG呢？不，我不需要，任何创建类似效果的东西都可以。正如我所说，我不认为我需要一个网格来覆盖整个页面，甚至不需要画布。我只是需要颜色来跟随鼠标，看起来真的很酷。这不在我的能力范围之内，但是在css中设置
box:hover
会更好吗，或者这基本上就是你已经在做的事情吗？编辑：可能用于获取鼠标位置并在其下生成div？如果使用
Math.floor
将永远不会选择最后一种颜色（好的，几乎永远不会）…好的，但是对于动态创建的对象呢？例如，每当鼠标移动时都会创建dom对象，并在其淡出后删除。届时将只有大约5个对象，不需要填充整个屏幕。“这可行吗？”凯文·杜克听起来可行。然而，它永远不会像画布方法那样表现出色。凯文·杜克如果你问我是否可以用帆布做，那当然可以。画布在你渲染的东西旁边是透明的，你可以在每一帧都清除它来更新图形。这太棒了！谢谢你