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

写一个鼠标拖尾特效

news 2026/5/12 8:28:40

思路和逻辑

要实现鼠标拖尾特效，我们需要：

  1. 监听鼠标移动事件，获取鼠标的当前位置。
  2. 在每次鼠标移动时，绘制一个小圆点或其他形状在鼠标的当前位置。
  3. 将所有绘制的圆点连接起来，形成一条“尾巴”。
  4. 使用动画效果让尾巴看起来像是在跟随鼠标移动。

分析

为了实现上述思路，我们需要：

  1. 使用 JavaScript 和 HTML5 Canvas API 来绘制图形。
  2. 使用 requestAnimationFrame 函数来实现动画效果。
  3. 使用数组来存储所有绘制的圆点的位置。
  4. 在每一帧中，清除画布，重新绘制所有圆点，并更新圆点的位置。

代码块

以下是实现鼠标拖尾特效的关键代码块：

// 获取画布元素和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;// 存储所有圆点的位置
let points = [];// 鼠标移动事件处理函数
function handleMouseMove(event) {// 获取鼠标的当前位置const x = event.clientX;const y = event.clientY;// 将新圆点的位置添加到数组中points.push({ x, y });// 如果圆点数量超过限制，移除最老的圆点if (points.length > 100) {points.shift();}
}// 动画循环函数
function animate() {// 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制所有圆点for (let i = 0; i < points.length; i++) {const point = points[i];ctx.beginPath();ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';ctx.fill();}// 更新圆点的位置for (let i = 0; i < points.length; i++) {const point = points[i];point.x += (mouseX - point.x) * 0.1;point.y += (mouseY - point.y) * 0.1;}// 请求下一帧动画requestAnimationFrame(animate);
}// 监听鼠标移动事件
document.addEventListener('mousemove', handleMouseMove);// 启动动画循环
animate();

完整代码

以下是完整的 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mouse Drag Tail Effect</title><style>body {margin: 0;padding: 0;background-color: #333;}canvas {display: block;}</style></head><body><canvas id="canvas"></canvas><script>// 获取画布元素和上下文const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 设置画布大小canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 存储所有圆点的位置let points = [];// 鼠标移动事件处理函数function handleMouseMove(event) {// 获取鼠标的当前位置const x = event.clientX;const y = event.clientY;// 将新圆点的位置添加到数组中points.push({ x, y });// 如果圆点数量超过限制，移除最老的圆点if (points.length > 100) {points.shift();}}// 动画循环函数function animate() {// 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制所有圆点for (let i = 0; i < points.length; i++) {const point = points[i];ctx.beginPath();ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';ctx.fill();}// 更新圆点的位置for (let i = 0; i < points.length; i++) {const point = points[i];point.x += (mouseX - point.x) * 0.1;point.y += (mouseY - point.y) * 0.1;}// 请求下一帧动画requestAnimationFrame(animate);}// 监听鼠标移动事件document.addEventListener('mousemove', handleMouseMove);// 启动动画循环animate();</script></body>
</html>

请注意，在上面的代码中，我们假设 mouseX 和 mouseY 变量已经被定义并更新为鼠标的当前位置。通常情况下，你需要在 handleMouseMove 函数中更新这些变量的值。

相关文章：

写一个鼠标拖尾特效

思路和逻辑 要实现鼠标拖尾特效&#xff0c;我们需要&#xff1a; 监听鼠标移动事件&#xff0c;获取鼠标的当前位置。在每次鼠标移动时&#xff0c;绘制一个小圆点或其他形状在鼠标的当前位置。将所有绘制的圆点连接起来&#xff0c;形成一条“尾巴”。使用动画效果让尾巴看…...

编程日记 2025/2/14 8:59:14

Redisson介绍和入门使用

一、什么是Redisson&#xff1f; Redisson是一个在Redis的基础上实现的Java驻内存数据网格&#xff08;In-Memory Data Grid&#xff09;。它不仅提供了一系列的分布式的Java常用对象&#xff0c;还提供了许多分布式服务&#xff0c;其中就包含了各种分布式锁的实现。 官网地址…...

编程日记 2025/2/14 8:58:10

OpenAI推出全新AI助手“Operator”：让人工智能帮你做事的新时代！

引言 随着人工智能技术的不断发展&#xff0c;OpenAI 再次推出令人兴奋的功能——Operator&#xff0c;一个全新的 AI 助手平台。这不仅仅是一个普通的助手&#xff0c;它代表了人工智能技术的又一次飞跃&#xff0c;将改变我们工作和生活的方式。 什么是“Operator”&#xff…...

编程日记 2025/2/14 8:56:08

Python----PyQt开发（PyQt基础，环境搭建，Pycharm中PyQttools工具配置，第一个PyQt程序）

一、QT与PyQT的概念和特点 1.1、QT QT是一个1991年由The Qt Company开发的跨平台C图形用户界面应用程序开发 框架&#xff0c;可构建高性能的桌面、移动及Web应用程序。也可用于开发非GUI程序&#xff0c;比如 控制台工具和服务器。Qt是面向对象的框架&#xff0c;使用特殊的代…...

编程日记 2025/2/14 8:55:06

算法笔记 02 —— 入门模拟

本系列为胡凡编著的算法笔记当中代码部分的精简版整理&#xff0c;笔者也在同时准备Leetcode刷题和实习面试&#xff0c;希望为有一定编码和数据结构基础的同学提供一份系统型的参考&#xff0c;以方便遗忘时的算法查阅、期末复习总览以及C学习参照。 目录 01 简单模拟 Ⅰ害…...

编程日记 2025/2/14 8:49:58

PyTorch 源码学习：从 Tensor 到 Storage

分享自己在学习 PyTorch 源码时阅读过的资料。本文重点关注 PyTorch 的核心数据结构 Tensor 的设计与实现。因为 PyTorch 不同版本的源码实现有所不同&#xff0c;所以笔者在整理资料时尽可能按版本号升序&#xff0c;版本号见标题前[]。最新版本的源码实现还请查看 PyTorch 仓…...

编程日记 2025/2/14 8:48:56

uniapp 使用 鸿蒙开源字体

uniapp vue3 使用 鸿蒙开源字体 我的需求是全局使用鸿蒙字体。 所以&#xff1a; 0. 首先下载鸿蒙字体&#xff1a; 鸿蒙资源 下载后解压&#xff0c;发现里面有几个文件夹&#xff1a; 字体名称说明Sans默认的鸿蒙字体&#xff0c;支持基本的多语言字符&#xff08;包括字…...

编程日记 2025/2/14 8:44:49

LabVIEW多电机CANopen同步

核心问题与解决方案 通信层配置 节点ID与波特率冲突问题&#xff1a;在多电机系统中&#xff0c;节点ID重复或波特率不匹配常导致通信中断或数据丢失。案例&#xff1a;某3轴贴片机因步科驱动器的默认节点ID均为1&#xff0c;触发了总线仲裁错误。解决方案&#xff1a;通过配置…...

编程日记 2025/2/14 8:39:44

每日定投40刀BTC（2）20250209 - 20250212

行路吟 青山叠叠水迢迢&#xff0c; 步履虽艰志未消。 莫问前程几多苦&#xff0c; 长风破浪自逍遥。...

编程日记 2025/2/14 8:37:40

【LeetCode Hot100 子串】和为 k 的子数组、滑动窗口最大值、最小覆盖子串

子串 1. 和为 k 的子数组题目描述解题思路主要思路步骤 时间复杂度与空间复杂度代码实现 2. 滑动窗口最大值题目描述解题思路双端队列的原理&#xff1a;优化步骤&#xff1a; Java实现 3. 最小覆盖子串题目描述解题思路滑动窗口的基本思路&#xff1a;具体步骤&#xff1a;算法…...

编程日记 2025/2/14 8:36:37

某虚拟页式存储管理系统中有一个程序占8个页面，运行时访问页面的顺序是1,2,3,4,5,3,4,1,6,7,8,7,8,5。假设刚开始内存没有预装入任何页面。

某虚拟页式存储管理系统中有一个程序占8个页面&#xff0c;运行时访问页面的顺序是1,2,3,4,5,3,4,1,6,7,8,7,8,5。假设刚开始内存没有预装入任何页面。 (1) 如果采用LRU调度算法&#xff0c;该程序在得到4块内存空间时&#xff0c;会产生多少次缺页中断&#xff1f;请给出详细…...

编程日记 2025/2/14 8:35:36

傅里叶公式推导(三)

文章目录 周期 2L周期T 周期 2L 周期 T 2 L T2L T2L 的傅里叶变换 即 f ( t ) f ( t 2 L ) f(t) f(t2L) f(t)f(t2L) xt2 π \pi π 2 L 2L 2L 原公式 f ( x ) a 0 2 ∑ n 1 ∞ [ a n cos ⁡ n x b n sin ⁡ n x ] a 0 1 π ∫ − π π f ( x ) d x a n 1 π ∫…...

编程日记 2025/2/14 8:34:34

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_time_update函数

定义在 src\core\ngx_times.c 中 ngx_time_init 函数后面 void ngx_time_update(void) {u_char *p0, *p1, *p2, *p3, *p4;ngx_tm_t tm, gmt;time_t sec;ngx_uint_t msec;ngx_time_t *tp;struct timeval tv;if (!ngx_trylock(&ngx…...

编程日记 2025/2/14 8:33:27

老牌系统工具箱，现在还能打！

今天给大家分享一款超实用的电脑软硬件检测工具&#xff0c;虽然它是一款比较“资深”的软件&#xff0c;但依然非常好用&#xff0c;完全能满足我们的日常需求。 电脑软硬件维护检测工具 功能强大易用 这款软件非常贴心&#xff0c;完全不需要安装&#xff0c;直接打开就能用…...

编程日记 2025/2/14 8:31:19

mysql error1449解决方法

MySQL Error 1449 错误信息为 “The user specified as a definer (userhost) does not exist”&#xff0c;意思是定义者&#xff08;创建存储过程、函数、触发器等数据库对象时指定的用户&#xff09;在当前系统中不存在&#xff0c;从而导致无法正常使用这些对象。以下是针对…...

编程日记 2025/2/14 8:28:16

Notepad++ 中删除所有以 “pdf“ 结尾的行

Notepad 中删除所有以 “pdf” 结尾的行 操作步骤 1.打开文件&#xff1a; 在 Notepad 中打开你需要处理的文本文件。 2.打开查找和替换对话框&#xff1a; 按快捷键 Ctrl F&#xff0c;打开“查找和替换”对话框。 3.启用正则表达式模式&#xff1a; 在对话框的底部&#xf…...

编程日记 2025/2/14 8:25:04

归并排序 和 七大算法的总结图

目录 什么是递归排序&#xff1a; 图解&#xff1a; 递归方法&#xff1a; 代码实现&#xff1a; 思路分析&#xff1a; 非递归方法&#xff1a; 思路&#xff1a; 代码实现&#xff1a; 思路分析&#xff1a; 什么是递归排序&#xff1a; 先将数据分解成诺干个序列&#xff0…...

编程日记 2025/2/14 8:24:03

嵌入式硬件篇---原码、补码、反码

文章目录 前言简介八进制原码、反码、补码1. 原码规则示例问题 2. 反码规则示例问题 3. 补码规则示例优点 4. 补码的运算5. 总结 十六进制原码、反码、补码1. 十六进制的基本概念2. 十六进制的原码规则示例 3. 十六进制的反码规则示例 4. 十六进制的补码规则示例 5. 十六进制补…...

编程日记 2025/2/14 8:22:57

评估多智能体协作网络（MACNET）的性能:COT和AUTOGPT基线方法

评估多智能体协作网络（MACNET）的性能 方法选择：选择COT（思维链，Chain of Thought）、AUTOGPT等作为基线方法。 COT是一种通过在推理过程中生成中间推理步骤，来增强语言模型推理能力的方法，能让模型更好地处理复杂问题，比如在数学问题求解中，展示解题步骤。 AUTOGPT则是…...

编程日记 2025/2/14 8:20:55

洛谷题目： P2398 GCD SUM 题解 （本题较难，省选-难度）

题目传送门&#xff1a; P2398 GCD SUM - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 前言&#xff1a; 本题涉及到 欧拉函数&#xff0c;素数判断&#xff0c;质数&#xff0c;筛法 &#xff0c;三大知识点&#xff0c;相对来说还是比较难的。 本题要求我们计算 …...

编程日记 2025/2/14 8:19:51

【2026实测】直击算法底层逻辑：论文AI率太高？5款工具与3大手改技巧盘点

最近不少学弟学妹在后台跟我倒苦水&#xff0c;说查重率好不容易低了&#xff0c;结果AI率越改越高。眼看临近DDL&#xff0c;生怕又因为这个耽误答辩。 作为已经摸爬滚打出来的老学长&#xff0c;今天我就根据我总结出来的经验&#xff0c;从检测系统的底层逻辑开始讲起&…...

编程新知 2026/5/12 8:17:32

Go语言单例模式如何实现_Go语言单例模式教程【通俗】

sync.Once是最安全的单例初始化方式&#xff0c;天然解决并发首次调用竞态问题&#xff0c;只执行一次闭包&#xff1b;须作包级或结构体字段&#xff0c;避免局部变量失效&#xff1b;panic后会持续失败&#xff0c;需自行兜底。Go 里 sync.Once 是最安全的单例初始化方式直接…...

编程新知 2026/5/12 6:46:09

嵌入式与半导体年度技术趋势：从RISC-V、Matter到EDA 2.0与软件定义汽车

1. 从年度回顾看嵌入式与半导体行业的技术脉搏又到年底复盘时&#xff0c;各大技术媒体都在梳理过去一年的重磅内容。最近看到EE Times整理其编辑Nitin Dahad的2022年度六大精选故事&#xff0c;感触颇深。这六篇文章&#xff0c;像六个精准的切片&#xff0c;生动勾勒了过去一…...

编程新知 2026/5/12 5:56:22

ANSYS Workbench网格进阶：巧用‘Face Meshing’与‘Sweep’扫掠，让你的轴承座仿真既快又准

ANSYS Workbench网格进阶&#xff1a;巧用‘Face Meshing’与‘Sweep’扫掠提升轴承座仿真效率 轴承座作为机械传动系统中的关键部件&#xff0c;其应力分布与变形分析的准确性直接影响设备可靠性评估。传统四面体网格虽能快速生成&#xff0c;但在应力集中区域往往需要极高密度…...

编程新知 2026/5/12 5:35:34

RT-DETR最新创新改进系列：4D辅助细化为检测颈部注入额外表达，融合后再增强，解码前再提纯，精度提升从特征质量开始！【细化特征，稳住精度】

本文为 RT-DETR 改进系列纯净发布稿&#xff0c;写法采用模块化技术博文形式&#xff1a;先讲痛点&#xff0c;再讲结构&#xff0c;再给配置、训练方式、实验表格和注意事项。全文仅保留技术正文&#xff0c;便于直接发布。摘要 本文围绕 4D 辅助细化 展开。该版本属于 结构增…...

编程新知 2026/5/12 3:56:09

别再花钱买板卡了！手把手教你用NI MAX免费创建虚拟PCI6224，搞定LabVIEW数字IO

零成本搭建LabVIEW开发环境&#xff1a;虚拟PCI6224板卡实战指南 当我在大学实验室第一次接触LabVIEW时&#xff0c;面对动辄上万的NI板卡价格标签&#xff0c;几乎浇灭了我的学习热情。直到发现NI MAX的虚拟设备功能——这个隐藏的宝藏工具&#xff0c;让我在没有物理硬件的情…...

编程新知 2026/5/12 3:09:38

BaiduPCS-Go深度解析：从原理到实践的性能调优进阶指南

BaiduPCS-Go深度解析&#xff1a;从原理到实践的性能调优进阶指南 【免费下载链接】BaiduPCS-Go iikira/BaiduPCS-Go原版基础上集成了分享链接/秒传链接转存功能 项目地址: https://gitcode.com/GitHub_Trending/ba/BaiduPCS-Go BaiduPCS-Go作为一款功能强大的命令行百度…...

编程新知 2026/5/12 2:18:45

Swarmocracy：基于蜂群智能的分布式组织决策模拟实践

1. 项目概述&#xff1a;当开源项目遇上“蜂群民主”最近在开源社区里闲逛&#xff0c;发现一个挺有意思的项目&#xff0c;叫“Swarmocracy”。光看名字&#xff0c;就能嗅到一股混合了技术极客与组织社会学的味道——“Swarm”&#xff08;蜂群&#xff09;加上“-cracy”&am…...

编程新知 2026/5/12 1:29:47

除了综合，DC Shell还能这么用：快速搭建一个轻量级RTL/Netlist查看与调试环境

DC Shell的隐藏技能&#xff1a;打造高效RTL/Netlist交互式调试环境 在数字芯片设计流程中&#xff0c;工程师们经常需要快速查看和分析RTL或网表文件。传统方法要么启动完整的综合流程耗时费力&#xff0c;要么依赖第三方工具可能面临兼容性问题。实际上&#xff0c;Synopsys …...

编程新知 2026/5/12 0:15:31

从“鸡尾酒会”到手机通话：用生活场景图解CDMA码分多址到底是怎么“听清”你的

鸡尾酒会里的通信密码&#xff1a;用生活场景拆解CDMA如何从噪音中识别你的声音 1. 当鸡尾酒会遇见通信技术 想象你站在一个嘈杂的鸡尾酒会现场&#xff0c;四周充斥着数十人同时进行的对话。神奇的是&#xff0c;尽管声波在空气中混杂叠加&#xff0c;你的大脑却能自动过滤无关…...

编程新知 2026/5/11 23:43:12