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

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

news 2026/2/6 10:47:51

文章目录

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

前言

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

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/12/21 20:15:17

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/1/23 11:34:02

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2026/1/25 14:31:47

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2026/1/25 13:32:52

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2026/1/31 7:11:11

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

编程新知 2026/2/1 21:56:50