先看个图 ![xtp8d-fzl7w.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fbdeb6b320d437fbe39bc2ab58185cd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=640&h=368&s=9718804&e=gif&f=251&b=25231e) 原地址：https://twitter.com/_nonfigurativ_/status/1722543833408286927 今天大佬群里分享了一个视频，有个国外大佬用Web做出来一个可以跨多浏览器窗口实时互动的渲染动画效果，看评论说有用到了`window.screenX``window.screenY`以及`localStorage`做的。搜了下api，看起来思路不是太复杂，而且是纯js，也不依赖第三方，开干！整体思路就是先用`canvas`在每个窗口中心画出一个圆形，然后把自己的相对屏幕的坐标信息存在`localStorage`里，然后再从`localStorage`里获取其它窗口的坐标信息，然后在自己窗口里画出连接线以及其它窗口的圆。先看下实现后的动画效果 ![20231123151540.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/186a10a36d9849a286ce9249fb5d0642~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1494\&h=810\&s=4660515\&e=gif\&f=258\&b=0687ea) 本文只是提供个思路，把多窗口实时移动、互动效果实现出来了，其它银河系云图粒子效果、以及移动窗口时的阻尼缓冲效果，还需要其它大佬启发了。 ### 知识点： 1. `window.requestAnimationFrame`浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘，比如画动画。 2. `const { screenX, screenY } = window`获取浏览器相对屏幕坐标。 3. `const barHeight = window.outerHeight - window.innerHeight`获取浏览器body顶部地址栏高度 4. `canvas`画图api。 5. `localStorage`本地存储器，同一域名下的多页面共享。 ### 先画个圆 ```html

``` ```javascript const alert1 = document.getElementById('alert1'); const alert2 = document.getElementById('alert2'); const canvas1 = document.getElementById('canvas1'); const ctx = canvas1.getContext('2d'); const color = 'red'; function draw() { const { clientWidth, clientHeight } = document.body; // 获取body高宽 const { screenX, screenY } = window; // 获取浏览器相对屏幕坐标 const barHeight = window.outerHeight - window.innerHeight; // 获取浏览器body顶部地址栏高度 // 记录log alert1.textContent = JSON.stringify({ clientWidth, clientHeight, screenX, screenY, barHeight }, '', 2); // 设置canvas为整个body高宽，铺满body canvas1.width = clientWidth; canvas1.height = clientHeight; // 获取自己的圆心坐标，为body中心 const x = clientWidth / 2; const y = clientHeight / 2; // 画圆 ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, 15, 0, Math.PI * 2); ctx.fill(); window.requestAnimationFrame(draw); } window.requestAnimationFrame(draw); ``` 效果如下图 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/772992499b5b421495388e60fb191a85~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=808\&h=608\&s=44635\&e=png\&b=fefefe) ### 把当前窗口position信息存localStorage key暂时用int 0，存相对屏幕的横纵坐标，以及颜色。 ```javascript const key = 0; // storage key ... // 记录自己的position const position = { top: y + barHeight + screenY, // 相对屏幕坐标 left: x + screenX, color: color, // 自己的颜色 }; // 更新自己窗口的position localStorage.setItem(key, JSON.stringify(position)); // 记录log alert2.textContent = JSON.stringify(localStorage, '', 2); ``` 效果如下图，可以看到storage存了一个"0"记录。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/222ab8e4fc0c445bbe566ca9eb82a0b1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=772\&h=566\&s=50498\&e=png\&b=fefefe) ### 给不同窗口定义不同storage key 由于storage里得存多个窗口的圆心位置信息，所以得给不同窗口定义不同key值，规范来说应该弄个方法获取浏览器唯一标识，但是没有现成好用api，就暂时弄成自增index序号机制。 ```javascript const keys = getStorageKeys(); // 获取其它窗口的storage keys const key = keys.length == 0 ? 1 : keys.at(-1) + 1; // 自增最大的key序号，定义自己窗口storage key const color = ['red', 'blue', 'green'][key % 3]; // 获取圆颜色 // 窗口关闭时删除自己窗口storage window.onunload = function () { localStorage.removeItem(key); } function getStorageKeys() { const keys = []; for (let i = 0; i < localStorage.length; i++) { const k = Number(localStorage.key(i)); !isNaN(k) && keys.push(k); } return keys.sort((a, b) => a - b); } ``` 然后在把key值通过log打在页面上，先清空下storage：`localStorage.clear()`，然后运行两个窗口。效果如下图，可以看到两个窗口都有自己的唯一key，storage里也存了对应position信息。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/783a383c2b464fc0956ef852a140e9eb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1324\&h=741\&s=291382\&e=png\&b=ffffff) ### 画出跟其它窗口圆心的连接线思路是遍历其它窗口存在storage里的location，然后遍历，计算相对自己窗口圆心的横纵间距，最后画线。 ```javascript // 获取其它窗口position，并遍历 getStorageKeys().forEach(k => { const position2 = JSON.parse(localStorage.getItem(k)); // 获取其中一个窗口的圆心position const w = position2.left - position.left; // 获取相对自己圆心的横向间距 const h = position2.top - position.top; // 获取相对自己圆心的纵向间距 // 画连接线 ctx.strokeStyle = "black"; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w, y + h); ctx.stroke(); }) ``` 开三个窗口，看看效果。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d8575e0332d4c2c9039de915f74a295~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1392\&h=922\&s=405361\&e=png\&b=ffffff) ### 覆盖当多窗口重叠覆盖时，原视频里会出现在顶层窗口里同时出现效果，如下图。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7107ab05a544485397d5eebf112b96ad~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1200\&h=675\&s=570023\&e=png\&b=3d3140) 思路是，把其它圆也画在当前窗口里，也就是说需要在所有窗口里，画出所有圆，只是其它圆坐标会在窗口外面，所以在窗口里看不到而已。 ```javascript // 获取其它窗口position，并遍历 getStorageKeys().forEach(k => { const position2 = JSON.parse(localStorage.getItem(k)); // 获取其中一个窗口的圆心position const w = position2.left - position.left; // 获取相对自己圆心的横向间距 const h = position2.top - position.top; // 获取相对自己圆心的纵向间距 // 在自己的canvas上画出该圆 ctx.fillStyle = position2.color; ctx.beginPath(); ctx.arc(x + w, y + h, 15, 0, Math.PI * 2); ctx.fill(); // 画连接线 ctx.strokeStyle = "black"; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w, y + h); ctx.stroke(); }) ``` 看下效果，有两个窗口覆盖时，俩圆在最上层窗口同时显示了，但是这里有个bug，蓝色和绿色俩圆没有连接线，所以还需要画下其它窗口的连接线。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7f435b7fd314fa39aed36021e1265ae~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1432\&h=781\&s=349235\&e=png\&b=fefefe) ### 完整代码 ```javascript const alert1 = document.getElementById('alert1'); const alert2 = document.getElementById('alert2'); const canvas1 = document.getElementById('canvas1'); const ctx = canvas1.getContext('2d'); const keys = getOtherKeys(); // 获取其它窗口的storage keys const key = keys.length == 0 ? 1 : keys.at(-1) + 1; // 自增最大的key序号，定义自己窗口storage key const color = ['red', 'blue', 'green'][key % 3]; // 获取圆颜色 // 窗口关闭时删除自己窗口storage window.onunload = function () { localStorage.removeItem(key); } function getOtherKeys() { const keys = []; for (let i = 0; i < localStorage.length; i++) { const k = Number(localStorage.key(i)); !isNaN(k) && keys.push(k); } return keys.sort((a, b) => a - b); } function draw() { const { clientWidth, clientHeight } = document.body; // 获取body高宽 const { screenX, screenY } = window; // 获取浏览器相对屏幕坐标 const barHeight = window.outerHeight - window.innerHeight; // 获取浏览器body顶部地址栏高度 // 记录log alert1.textContent = JSON.stringify({ key, clientWidth, clientHeight, screenX, screenY, barHeight }, '', 2); // 设置canvas为整个body高宽，铺满body canvas1.width = clientWidth; canvas1.height = clientHeight; // 获取自己的圆心坐标，为body中心 const x = clientWidth / 2; const y = clientHeight / 2; // 画自己的圆 ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, 15, 0, Math.PI * 2); ctx.fill(); // 记录自己的position const position = { top: y + barHeight + screenY, left: x + screenX, color: color, }; // 获取其它窗口position，并遍历 getOtherKeys().forEach(k => { const position2 = JSON.parse(localStorage.getItem(k)); // 获取其中一个窗口的圆心position const w = position2.left - position.left; // 获取相对自己圆心的横向间距 const h = position2.top - position.top; // 获取相对自己圆心的纵向间距 // 在自己的canvas上画出该圆 ctx.fillStyle = position2.color; ctx.beginPath(); ctx.arc(x + w, y + h, 15, 0, Math.PI * 2); ctx.fill(); // 画连接线 ctx.strokeStyle = "black"; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w, y + h); ctx.stroke(); }) // 更新自己窗口的position localStorage.setItem(key, JSON.stringify(position)); // 记录log alert2.textContent = JSON.stringify(localStorage, '', 2); window.requestAnimationFrame(draw); } window.requestAnimationFrame(draw); ``` ## 总结本文只是简单的实现了下多窗口位置计算、介绍下相关window api、简单的画图方法、以及localStorage的用法。 **还有待优化：** 1. 当有多个窗口覆盖时，还需要画下其它窗口的连接线。 2. 优化算法，现在的循环算法还有很大优化空间，比如： 1. 先把position存到storage里，然后遍历每个窗口position信息； 2. 然后在每个窗口上画出所有圆，所有连接线（无论连接线是不是连自己的）； 3. 也就是说，每个窗口画的内容都是一样的，只是canvas的基础坐标位置不一样，都是自己的窗口中心点。 3. 其它效果还没实现，比如云图粒子的动画、还有移动窗口时的阻尼缓冲动画效果。 v1 Demo：码上掘金，可以切换效果视图，然后多开浏览器窗口。 [jcode](https://code.juejin.cn/pen/7304830917096669221) 另外国外原作者也更新了简易版：https://github.com/bgstaal/multipleWindow3dScene ## 最新更新v2版本更新了第二版，引用了`three.js`实现了粒子效果，并且还优化了算法逻辑：[终于把国外大佬的跨窗口量子纠缠粒子效果给肝出来](https://juejin.cn/post/7307057492059471899)，欢迎围观！ GitHub源码：https://github.com/markz-demo/mark-cross-window-render v2 Demo：同步推送到了公众号：**「前端程序员大熊」**，求个关注，求个赞 :)