wallpaper 的CGI壁纸electrico修改代码 和无界鼠标配合实现跨越功能

elecctrico壁纸很多人都很喜欢，如下图所示。但是存在一定局限性，如果你想实现图中的怪物动态跟你的鼠标跨越到另一个显示器上的时候，它过不来。我们通常实现一套键鼠操作两台主机用的是无界鼠标-mouse  without no board。

1.wallpaper engine（壁纸引擎）中的壁纸通常是四种格式——html、视频、图片和wallpaper engine自己的一种数据格式。

恰好cgi类型的壁纸大多数是html生成的。因此修改起来也方便一些。

首先在wallpaper里订阅electrico壁纸。右键打开文件所在文件夹，找到Untitled-1.html文件。

如果你想修改怪物的颜色

搜索c.strokeStyle找到代码内容就能修改

我修改成了金色，代码如下

c.strokeStyle =
    "hsl(" +
    (this.rand * 20 + 50) + // 调整色调，产生金色的变化
    "," +
    "100%," + // 饱和度设为100%，保持颜色纯度
    "75%" + // 亮度设为75%，可以调整以获得不同的金色效果
    ")";

言归正传，实现怪物的跨越屏幕的问题首先就要解决无界鼠标的一个问题，那就是，当a的鼠标移到b的界面上的时候，并不代表a的鼠标就真的移了过来，而是，a的鼠标不显示鼠标图标，但是其实是移动到了a的屏幕最上面的中间位置，坐标应该是（w/2，0），其中w代表屏幕的宽度。因此如果我们只是在两台主机上下载这个壁纸。当两个html文件运行的时候，避免不了鼠标跨界的时候，怪物会移动到 （w/2，0）这个地方。因此我们要做的就是当默认鼠标位置移动到（w/2，0）的时候，让怪物不显示。

修改draw()函数

 function draw() {
           // 检查鼠标位置是否有效
           target.errx = mouse.x - target.x;
           target.erry = mouse.y - target.y;

           // 更新目标位置
           target.x += (target.errx !== null ? target.errx : 0) / 10;
           target.y += (target.erry !== null ? target.erry : 0) / 10;

           t += 0.01;

           // 如果鼠标不在画布上，不绘制任何内容
           if (mouse.y < 5) {
               return; // 直接返回，不执行任何绘制操作
           }

           // 绘制动画
           c.beginPath();
           c.arc(
               target.x,
               target.y,
               dist(last_target.x, last_target.y, target.x, target.y) + 5,
               0,
               2 * Math.PI
           );
           c.fillStyle = "hsl(210,100%,80%)";
           //c.fill();

           // 绘制触手动画
           for (let i = 0; i < numt; i++) {
               tent[i].move(last_target, target);
               tent[i].show(target); // 假设show方法会根据target的有效性决定是否绘制
           }

           // 更新上一次的目标位置
           last_target.x = target.x;
           last_target.y = target.y;
       }

修改成如上图所示，就可以实现怪物的跨界了，这其实是一种视觉的欺骗效果。