当前位置： 首页 > news >正文

window.requestAnimationFrame+localStorage+canvas实现跨窗口小球连线效果

news 2025/9/23 22:50:05

文章目录

  • 前言
  • 效果
  • 代码
  • 后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：前端系列文章
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

效果

小球连接效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head><body><div id="alert1" style="white-space:pre-wrap;"></div><div id="alert2" style="white-space:pre-wrap;"></div><canvas id="canvas1" style="position:absolute;left:0;top:0;"></canvas><script src="./index.js"></script></body></html>

html{width: 100vw;height: 100vh;}
body{width: 100vw;height: 100vh;overflow: hidden;
}

const alert1 = document.getElementById('alert1');
const alert2 = document.getElementById('alert2');
const canvas1 = document.getElementById('canvas1');
const ctx = canvas1.getContext('2d');const keys = getOtherKeys(); // 获取其它窗口的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顶部地址栏高度// 设置canvas为整个body高宽，铺满bodycanvas1.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();// 记录自己的positionconst position = {top: y + barHeight + screenY,left: x + screenX,color: color,};// 获取其它窗口position，并遍历getOtherKeys().forEach(k => {const position2 = JSON.parse(localStorage.getItem(k)); // 获取其中一个窗口的圆心positionconst 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();})// 更新自己窗口的positionlocalStorage.setItem(key, JSON.stringify(position));window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力

相关文章：

window.requestAnimationFrame+localStorage+canvas实现跨窗口小球连线效果

文章目录 前言效果代码后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端系列文章 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&#xff0c;感谢大家…...

编程日记 2023/11/24 18:09:09

使用AndResGuard报错：copy res file not in resources.arsc file:Ezi.xml

Android使用AndResGuard进行资源混淆&#xff0c;压缩。 源码地址&#xff1a;GitHub - shwenzhang/AndResGuard: proguard resource for Android by wechat team 集成完成后编译过程中出现如下错误&#xff1a; 14:57:05 copy res file not in resources.arsc file:IUk.xml…...

编程日记 2023/11/24 18:08:06

插入排序（形象类比）

最近在看riscv手册的时候&#xff0c;里面有一段代码是插入排序&#xff0c;但是单看代码的时候有点迷&#xff0c;没看懂咋操作的&#xff0c;后来又查资料复习了一下&#xff0c;最终才把代码看明白&#xff0c;所以写篇博客记录一下。 插入排序像打扑克牌 这是我听到过比较形…...

编程日记 2023/11/24 18:07:06

ElasticSearch 同步的方式

ElasticSearch 同步的方式 ElasticSearch是一款强大的分布式搜索和分析引擎&#xff0c;支持多种方式同步数据和日志。下面介绍几种常见的同步方式&#xff1a; 1. Logstash Logstash 是 ElasticStack 的一部分&#xff0c;用于收集、处理和转发日志和事件数据。通过配置 Lo…...

编程日记 2023/11/24 18:05:02

easyExcel实现分批导入，动态表头分批导出，以及导出表格样式设置

<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.6</version></dependency> 一&#xff0c;分批导入 1.首先配置表格头映射类 Getter Setter EqualsAndHashCode public class …...

编程日记 2023/11/24 18:04:01

Android BottomNavigationView底部菜单栏文字显示问题

1. BottomNavigationView 如果tab栏数据小于等于3个&#xff0c;那么图标和文字都是展示出来&#xff1b; 2. BottomNavigationView 如果tab栏数据大于3个&#xff0c;那么图标会显示出来&#xff0c;但是文字会隐藏&#xff1b; 3. 解决方式&#xff1a; &#xff08;当底部…...

编程日记 2023/11/24 18:03:00

从零开始学习typescript——运算符(条件运算法、逻辑运算符、类型运算符、位运算)

条件运算符 条件运算符是一个根据条件返回不同运算结果的运算符 关键字&#xff1a;?: 三元运算符 它可以换成if …else 判断 ? true &#xff1a; false 判断为true&#xff0c;返回&#xff1f;号后面的&#xff0c;判断为false ,返回&#xff1a; 号后面的 逻辑运算符 用…...

编程日记 2023/11/24 18:01:59

【开源】基于Vue.js的康复中心管理系统

项目编号&#xff1a; S 056 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S056&#xff0c;文末获取源码。} 项目编号&#xff1a;S056&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员…...

编程日记 2023/11/24 17:59:56

抢先看｜第二届世界直播电商大会邀您共话时代“新电商”

党的二十大报告指出&#xff0c;要加快发展数字经济&#xff0c;促进数字经济和实体经济深度融合。要深化国家数字经济创新发展试验区建设&#xff0c;打造一批具有国际竞争力的战略性新兴产业集群和数字产业集群。电子商务作为数字经济中规模最大、表现最活跃、发展势头最好的…...

编程日记 2023/11/24 17:57:52

火爆火爆！影响超250万读者，Python入门圣经全新升级！

人生苦短&#xff0c;快学Python&#xff01; 什么&#xff1f;你没用过&#xff0c;也没开始学习&#xff0c;甚至没有认真了解过这门语言&#xff1f;那你一定这一秒就开始发力——下面让我们先简单看看 Python 有多火。权威编程语言排行榜 TIOBE&#xff0c;2022 和 2023 都…...

编程日记 2023/11/24 17:56:52

大数据学习(23)-hive on mapreduce对比hive on spark

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…...

编程日记 2023/11/24 17:55:51

通过这个简单的技巧让我们的 JavaScript 代码变得异常快

通过这个简单的技巧让我们的 JavaScript 代码变得异常快 秘诀&#xff1a;了解JavaScript 虚拟机(VM)的内部工作原理。 首先&#xff0c;我们来谈谈像 V8 这样的JavaScript 虚拟机(VM)。可以把它想象成我们的操作的大脑 —— 它将我们简洁的代码变成计算机可以理解和执行的东…...

编程日记 2023/11/24 17:54:49

vue怎么实现国际化? vue-i18n 插件实现国际化，支持切换不同语言

依赖的文档开始 | Vue I18n 一、安装 npm install vue-i18n 如果在一个模块系统中使用它&#xff0c;你必须通过 Vue.use() 明确地安装 vue-i18n&#xff1a; import Vue from vue import VueI18n from vue-i18nVue.use(VueI18n)二、使用 在 src 下创建 lang 文件夹 1.准…...

编程日记 2023/11/24 17:53:48

rabbit MQ的延迟队列处理模型示例(基于SpringBoot延时插件实现)

rabbitMQ安装插件rabbitmq-delayed-message-exchange 交换机由此type 表示组件安装成功 生产者发送消息时设置延迟值 消息在交换机滞纳至指定延迟后&#xff0c;进入队列&#xff0c;被消费者消费。 组件注解类&#xff1a; package com.esint.configs;import org.springfra…...

编程日记 2023/11/24 17:52:47

虽不想承认，但这就是CSGO游戏搬砖行业的现状

CSGO搬砖日常出货更新 其实整个搬砖市场&#xff0c;现在已经变得乌烟瘴气&#xff0c;散发着“恶臭”。我个人非常鄙视那些虚有其表&#xff0c;大小通吃的做法&#xff0c;那些甚至连搬砖数据都看不懂的人&#xff0c;也出来吹嘘着“实力强大&#xff0c;经验丰富”。这个世界…...

编程日记 2023/11/24 17:51:46

想问问各位大佬，网络安全这个专业普通人学习会有前景吗？

网络安全是一个非常广泛的领域&#xff0c;涉及到许多不同的岗位。这些岗位包括安全服务、安全运维、渗透测试、web安全、安全开发和安全售前等。每个岗位都有自己的要求和特点&#xff0c;您可以根据自己的兴趣和能力来选择最适合您的岗位。 渗透测试/Web安全工程师主要负责模…...

编程日记 2023/11/24 17:50:45

uniapp IOS从打包到上架流程（详细简单） 原创

​ 1.登入苹果开发者网站&#xff0c;打开App Store Connect ​ 2.新App的创建 点击我的App可以进入App管理界面&#xff0c;在右上角点击➕新建App 即可创建新的App&#xff0c;如下图&#xff1a; ​ 3.app基本信息填写 新建完App后&#xff0c;需要填写App的基本信息&…...

编程日记 2023/11/24 17:49:44

React Native项目接入Sentry指南

本文主要介绍React Native项目接入Sentry流程，以及遇到的一些注意点，方便大家去解决和处理，如果在接入过程中，遇到任何问题可以在评论区留言，我将根据自己的接入经验给出一些解决方案和建议。 1, 安装sentry sdk 我们可以在项目中执行如下命令来安装sentry，命令如下： …...

编程日记 2023/11/24 17:47:43

首批！创邻科技入选《图数据库金融应用场景优秀案例》

11月11日&#xff0c;“全球金融科技中心网络年会”在第三届全球金融科技大会暨第五届成方金融科技论坛上成功在京举办。会上&#xff0c;北京前沿金融监管科技研究院发布了基于国际标准组织——国际关联数据基准委员会&#xff08;LDBC&#xff09;的《图数据库金融应用场景优…...

编程日记 2023/11/24 17:46:42

WPF树形控件TreeView使用介绍

WPF 中的 TreeView 控件用于显示层次结构数据。它是由可展开和可折叠的 TreeViewItem 节点组成的&#xff0c;这些节点可以无限嵌套以表示数据的层次。 TreeView 基本用法 例如实现下图的效果&#xff1a; xaml代码如下&#xff1a; <Window x:Class"TreeView01.Mai…...

编程日记 2023/11/24 17:45:41

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/9/17 5:38:47

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/9/21 5:10:22

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/23 17:38:09

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/9/23 10:19:08

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/6/16 8:33:33

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/9/23 15:04:55

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/9/22 17:38:43

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/9/22 19:45:53

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/9/22 22:32:49