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

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

news 2026/4/25 15:54:09

文章目录

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

前言

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

Linux内核里PCIe ECAM的‘幕后英雄’：ecam.c源码导读与配置空间访问全景图

Linux内核中PCIe ECAM机制的深度解析与实战指南 引言 在探索现代计算机体系结构时&#xff0c;PCI Express&#xff08;PCIe&#xff09;总线作为连接CPU与各种外设的高速通道&#xff0c;其重要性不言而喻。而在这背后&#xff0c;ECAM&#xff08;Enhanced Configuration Acc…...

编程新知 2026/4/25 15:37:35

Windows任务栏透明美化终极指南：用TranslucentTB打造个性化桌面

Windows任务栏透明美化终极指南&#xff1a;用TranslucentTB打造个性化桌面 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 还在为Window…...

编程新知 2026/4/25 15:10:11

5步掌握novelWriter：开源小说写作神器的高效创作指南

5步掌握novelWriter&#xff1a;开源小说写作神器的高效创作指南 【免费下载链接】novelWriter novelWriter is an open source plain text editor designed for writing novels. 项目地址: https://gitcode.com/gh_mirrors/no/novelWriter novelWriter是一款专为小说创…...

编程新知 2026/4/25 14:12:46

【实战指南】龙芯2K1000开发板：从零到一，快速上手全功能测试

1. 龙芯2K1000开发板开箱与硬件组装 第一次拿到迅为iTOP龙芯2K1000开发板时&#xff0c;包装盒里整齐排列的配件让我这个嵌入式老手也眼前一亮。作为国产处理器的代表作&#xff0c;这块开发板确实在硬件配置上下了功夫。我们先来清点标配配件&#xff1a;12V电源适配器、232串…...

编程新知 2026/4/25 13:14:51

深度学习实战：从零搭建CLIP——让AI看懂图像和文字的神奇配对

零基础也能懂的CLIP完整教程 | 附PyTorch可运行代码写在前面&#xff1a;为什么你需要了解CLIP&#xff1f;如果你用过手机相册里的“按文字搜照片”&#xff0c;或者在某些AI绘图软件里输入一句话就能生成图片&#xff0c;那背后很可能就有CLIP的影子。CLIP是OpenAI在2021年提…...

编程新知 2026/4/25 10:55:04

保姆级教程：用rsync+dd脚本，把RK3588开发板上的精简系统打包成img镜像

RK3588开发板系统镜像制作&#xff1a;从自动化脚本到生产级部署全解析 当我们在RK3588开发板上完成系统定制与优化后&#xff0c;如何将这套精心调校的环境高效、可靠地部署到多台设备&#xff1f;传统的手动操作不仅耗时&#xff0c;还容易引入人为错误。本文将深入探讨基于r…...

编程新知 2026/4/25 10:52:56

为什么你的VSCode在千行代码仓库中卡顿3.7秒？——基于V8引擎与Electron 25内核的工业配置优化白皮书

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;VSCode千行代码仓库卡顿现象的工业级归因分析 当 VSCode 打开包含 1000 行代码的中等规模仓库&#xff08;如 TypeScript React 单体项目&#xff09;时&#xff0c;常见编辑延迟、自动补全挂起、文件…...

编程新知 2026/4/25 10:36:37

香港科技大学工学院航空工程项目研究生招生宣讲会-北京航空航天大学专场

&#x1f559;时间&#xff1a;4月27日&#xff08;星期一&#xff09;15:30 &#x1f3e0;地点&#xff1a;北京航空航天大学沙河校区J4-104&#x1f31f;航空工程课程设置、申请要求、招录流程、奖学金等一手资讯介绍&#xff01; &#x1f9d1;‍&#x1f393;招生团队亲临现…...

编程新知 2026/4/25 10:34:35

从零到一：基于STM32F407VET6与CubeMX的CAN通信实战配置与调试

1. CAN通信基础与STM32F407VET6硬件准备 CAN总线在工业控制领域就像老司机们熟悉的"对讲机"——不需要主机调度&#xff0c;任何节点都能随时发言&#xff0c;遇到冲突时会自动仲裁。STM32F407VET6内置了两个CAN控制器&#xff0c;我们这次用的是CAN1&#xff0c;它挂…...

编程新知 2026/4/25 9:30:37

Phi-3.5-mini-instruct助力Git工作流：智能提交信息与代码审查

Phi-3.5-mini-instruct助力Git工作流&#xff1a;智能提交信息与代码审查 1. 开发者的痛点&#xff1a;Git提交的烦恼 每个开发者都经历过这样的时刻&#xff1a;完成一段代码修改后&#xff0c;面对Git提交界面却不知如何用简洁准确的语言描述这次变更。"修复bug"…...

编程新知 2026/4/25 8:30:05