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

写一个鼠标拖尾特效

news 2026/2/10 23:31:08

思路和逻辑

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

  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

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...

编程新知 2026/2/4 20:31:20

【iOS】 Block再学习

iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...

编程新知 2026/2/1 20:22:45

大模型真的像人一样“思考”和“理解”吗？​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...

编程新知 2025/11/28 20:02:50

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

编程新知 2025/9/11 18:09:26