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

写一个鼠标拖尾特效

news 2026/2/10 16:35:53

思路和逻辑

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

  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

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2026/2/6 13:01:28

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53

React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？

系列回顾&#xff1a; 在上一篇《React核心概念&#xff1a;State是什么&#xff1f;》中&#xff0c;我们学习了如何使用useState让一个组件拥有自己的内部数据&#xff08;State&#xff09;&#xff0c;并通过一个计数器案例&#xff0c;实现了组件的自我更新。这很棒&#…...

编程新知 2025/9/6 3:35:30

无需布线的革命：电力载波技术赋能楼宇自控系统-亚川科技

无需布线的革命&#xff1a;电力载波技术赋能楼宇自控系统 在楼宇自动化领域&#xff0c;传统控制系统依赖复杂的专用通信线路&#xff0c;不仅施工成本高昂&#xff0c;后期维护和扩展也极为不便。电力载波技术&#xff08;PLC&#xff09;的突破性应用&#xff0c;彻底改变了…...

编程新知 2026/1/11 9:09:02