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

写一个鼠标拖尾特效

news 2025/12/4 13:16:01

思路和逻辑

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

  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

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/12/2 9:28:34

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/12/3 9:42:14

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/11/19 11:49:39

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2025/12/1 11:19:59

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2025/12/3 22:07:50

车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程新知 2025/11/27 1:06:12

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

编程新知 2025/12/2 4:29:24

PydanticAI快速入门示例

参考链接&#xff1a;https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...

编程新知 2025/12/2 17:43:20