尝试实现了国外大佬用Web做出来跨窗口渲染动画效果_跨窗口渲染的交互效果(1)

2401_84411767

于 2024-05-02 20:40:56 发布

阅读量22

点赞数 6

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84411767/article/details/138399548

版权

程序员专栏收录该内容

212 篇文章 1 订阅

订阅专栏

整体思路就是先用**canvas在每个窗口中心画出一个圆形，然后把自己的相对屏幕的坐标信息存在localStorage里，然后再从localStorage**里获取其它窗口的坐标信息，然后在自己窗口里画出连接线以及其它窗口的圆。

先看下实现后的动画效果

本文只是提供个思路，把多窗口实时移动、互动效果实现出来了，其它银河系云图粒子效果、以及移动窗口时的阻尼缓冲效果，还需要其它大佬启发了。

知识点：

window.requestAnimationFrame浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘，比如画动画。
**const { screenX, screenY } = window**获取浏览器相对屏幕坐标。
**const barHeight = window.outerHeight - window.innerHeight**获取浏览器body顶部地址栏高度
canvas画图api。
**localStorage**本地存储器，同一域名下的多页面共享。

1 、先画个圆

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Cross window</title>
</head>

<body>
	<div id="alert1" style="white-space:pre-wrap;"></div>
	<br />
	<div id="alert2" style="white-space:pre-wrap;"></div>
	<canvas id="canvas1" style="position:absolute;left:0;top:0;"></canvas>
</body>
<script>
	const alert1 = document.getElementById('alert1');
	const alert2 = document.getElementById('alert2');


### 最后

全网独播-价值千万金融项目前端架构实战

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi1iMzExOWVhYzM3ZjkyNWE3NjMyNTFkNWE5ZWY5Njc3MF9oZC5qcGc?x-oss-process=image/format,png)



从两道网易面试题-分析JavaScript底层机制

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi0xMGE3MzBlOTc1ZmVjOTFjMDcwOTE1OWIwMTdjNTliMV9oZC5qcGc?x-oss-process=image/format,png)



RESTful架构在Nodejs下的最佳实践

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1hY2UyZjVjNjQ1YjhkMTE1MzA4YzcyZDM1ZGNkZGYzNV9oZC5qcGc?x-oss-process=image/format,png)

一线互联网企业如何初始化项目-做一个自己的vue-cli

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04MGU5MWQ0NGY3NTUzZTA5OTJhOWEzN2Y2OGFhYTAwNF9oZC5qcGc?x-oss-process=image/format,png)



思维无价，看我用Nodejs实现MVC

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yZGI4MTZiY2JlODkwNjBiMDY1NWIyODdlM2Y4NWVlM19oZC5qcGc?x-oss-process=image/format,png)



代码优雅的秘诀-用观察者模式深度解耦模块

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04YTY0YTU3YTdlNDFmZDc3OTRiZWYzNjVkYjNlYzQxMF9oZC5qcGc?x-oss-process=image/format,png)

前端高级实战，如何封装属于自己的JS库

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1lOTdlMTZkMWYyNDZhNjUxZjA4ZThlZjdjZjRhZWRjZl9oZC5qcGc?x-oss-process=image/format,png)

VUE组件库级组件封装-高复用弹窗组件

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi00NWJjMGI2OWU4YzY2YTcxYzBkNWFiNjczZTkzM2MyZF9oZC5qcGc?x-oss-process=image/format,png)

2401_84411767

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
尝试实现了国外大佬用Web做出来跨窗口渲染动画效果_跨窗口渲染的交互效果(1)

整体思路就是先用**canvas**里获取其它窗口的坐标信息，然后在自己窗口里画出连接线以及其它窗口的圆。本文只是提供个思路，把多窗口实时移动、互动效果实现出来了，其它银河系云图粒子效果、以及移动窗口时的阻尼缓冲效果，还需要其它大佬启发了。
复制链接

扫一扫