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

HTML鼠标移动的波浪线动画——页面将会初始化一个Canvas元素，并使用JavaScript代码在Canvas上绘制响应鼠标移动的波浪线动画

news 2025/9/17 5:14:05

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Wave Animation</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;}</style>
</head>
<body><canvas id="canvas"></canvas><script>class Wave {constructor(e) {this.phase = e.phase || 0;this.offset = e.offset || 0;this.frequency = e.frequency || 0.001;this.amplitude = e.amplitude || 1;}update() {this.phase += this.frequency;return this.offset + Math.sin(this.phase) * this.amplitude;}}class Node {constructor() {this.x = 0;this.y = 0;this.vy = 0;this.vx = 0;}}class Line {constructor(e, pos) {this.spring = e.spring + 0.1 * Math.random() - 0.05;this.friction = E.friction + 0.01 * Math.random() - 0.005;this.nodes = [];this.pos = pos; for (let i = 0; i < E.size; i++) {const t = new Node();t.x = this.pos.x;t.y = this.pos.y;this.nodes.push(t);}}update() {let spring = this.spring;let node = this.nodes[0];node.vx += (this.pos.x - node.x) * spring;node.vy += (this.pos.y - node.y) * spring;let prevNode;for (let i = 0; i < this.nodes.length; i++) {node = this.nodes[i];if (i > 0) {prevNode = this.nodes[i - 1];node.vx += (prevNode.x - node.x) * spring;node.vy += (prevNode.y - node.y) * spring;node.vx += prevNode.vx * E.dampening;node.vy += prevNode.vy * E.dampening;}node.vx *= this.friction;node.vy *= this.friction;node.x += node.vx;node.y += node.vy;spring *= E.tension;}}draw(ctx) {let currNode,nextNode,x = this.nodes[0].x,y = this.nodes[0].y;ctx.beginPath();ctx.moveTo(x, y);let i;for (i = 1; i < this.nodes.length - 2; i++) {currNode = this.nodes[i];nextNode = this.nodes[i + 1];x = 0.5 * (currNode.x + nextNode.x);y = 0.5 * (currNode.y + nextNode.y);ctx.quadraticCurveTo(currNode.x, currNode.y, x, y);}currNode = this.nodes[i];nextNode = this.nodes[i + 1];ctx.quadraticCurveTo(currNode.x, currNode.y, nextNode.x, nextNode.y);ctx.stroke();ctx.closePath();}}const E = {friction: 0.5,trails: 20,size: 50,dampening: 0.25,tension: 0.98,};const renderCanvas = function () {const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let lines = [];const pos = { x: 0, y: 0 };const wave = new Wave({phase: Math.random() * 2 * Math.PI,amplitude: 85,frequency: 0.0015,offset: 285,});let running = true;let frame = 1;function resizeCanvas() {ctx.canvas.width = window.innerWidth;ctx.canvas.height = window.innerHeight;}resizeCanvas();function animate() {if (running) {ctx.globalCompositeOperation = "source-over";ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);ctx.globalCompositeOperation = "lighter";ctx.strokeStyle = `hsla(${Math.round(wave.update())}, 90%, 50%, 0.25)`;ctx.lineWidth = 1;for (let i = 0; i < E.trails; i++) {const line = lines[i];line.update();line.draw(ctx);}frame++;window.requestAnimationFrame(animate);}}function bindMouseMove(event) {function drawLine() {lines = [];for (let i = 0; i < E.trails; i++)lines.push(new Line({ spring: 0.45 + (i / E.trails) * 0.025 }, pos));}function move(e) {e.touches? ((pos.x = e.touches[0].pageX), (pos.y = e.touches[0].pageY)): ((pos.x = e.clientX), (pos.y = e.clientY));e.preventDefault();}function start(e) {if (e.touches.length === 1) {pos.x = e.touches[0].pageX;pos.y = e.touches[0].pageY;}}document.removeEventListener("mousemove", bindMouseMove);document.removeEventListener("touchstart", bindMouseMove);document.addEventListener("mousemove", move);document.addEventListener("touchmove", move);document.addEventListener("touchstart", start);move(event);drawLine();animate();}document.addEventListener("mousemove", bindMouseMove);document.addEventListener("touchstart", bindMouseMove);document.body.addEventListener("orientationchange", resizeCanvas);window.addEventListener("resize", resizeCanvas);window.addEventListener("focus", () => {if (!running) {running = true;animate();}});window.addEventListener("blur", () => {running = true;});};renderCanvas();</script>
</body>
</html>

#解析HTML代码

  1. HTML结构：
    • 页面中包含一个<canvas>元素，用于绘制动画。
    • CSS样式用于隐藏页面的默认边距，并使画布全屏显示。
  2. JavaScript代码：
    • 包含了之前定义的所有类和函数。
    • renderCanvas函数被调用以启动动画。
  3. 事件监听：
    • 添加了鼠标移动和触摸事件监听器，以更新线条的位置。
    • 窗口调整大小事件监听器用于保持画布与窗口大小同步。

将上述HTML代码保存为一个.html文件，并在浏览器中打开，你就可以看到一个随着鼠标移动变化的波浪线动画了。

#解析JS代码

  1. Wave 类：
    • 用于描述一个正弦波，包含相位(phase)、偏移(offset)、频率(frequency)和振幅(amplitude)属性。
    • update 方法用于更新波形，每次调用时相位增加一定的频率，并返回当前波形的位置。
  2. Node 类：
    • 代表动画中的一个点，拥有位置(x, y)和速度(vx, vy)。
  3. Line 类：
    • 描述由多个Node组成的线段。
    • 包含弹簧系数(spring)、摩擦系数(friction)和节点列表(nodes)。
    • update 方法用于更新每个节点的位置，根据相邻节点的位置和速度以及弹簧和摩擦力。
    • draw 方法用于在Canvas上下文上绘制线条。
  4. E 对象：
    • 定义了动画的一些常量，如摩擦系数、轨迹数量、节点数量、阻尼系数和张力系数。
  5. renderCanvas 函数：
    • 初始化Canvas，并设置其尺寸。
    • 创建一个Wave实例，并定义了一些动画相关的变量。
    • animate 函数负责动画的绘制和更新。
    • 通过监听鼠标移动和触摸事件来更新线条的位置，并开始动画循环。

相关文章：

HTML鼠标移动的波浪线动画——页面将会初始化一个Canvas元素，并使用JavaScript代码在Canvas上绘制响应鼠标移动的波浪线动画

代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Wave Animation</title><style&…...

编程日记 2024/11/3 1:14:59

树莓派开发相关知识八-其他传感器

1、蜂鸣器 #!/usr/bin/env python #coding:utf-8import RPi.GPIO as GPIO import time OUT5 def init():GPIO.setwarnings(False)GPIO.setmode(GPIO.BCM)GPIO.setup(OUT,GPIO.OUT)#蜂鸣器鸣叫函数 def beep(seconds):GPIO.output(OUT,GPIO.HIGH)time.sleep(seconds)GPIO.output…...

编程日记 2024/11/3 1:13:58

ComfyUI - ComfyUI 工作流中集成 SAM2 + GroundingDINO 处理图像与视频 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143359538 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 SAM2 与…...

编程日记 2024/11/3 1:12:57

STM32G4 双ADC模式之常规同步模式独立注入模式

目录 概述 1 认识双ADC模式 2 功能实现 2.1 原理介绍 2.2 实现方法 概述 本文主要介绍STM32G4 双ADC模式之常规同步模式&独立注入模式相关内容&#xff0c;包括ADC模块的功能介绍&#xff0c;实现框架结构&#xff0c;以及常规同步模式&独立注入模式ADC的转换的实…...

编程日记 2024/11/3 1:10:55

深入理解网络协议：OSPF、VLAN、NAT与ACL详解

OSPF工作过程与基础配置 一、OSPF的工作过程 OSPF&#xff08;开放最短路径优先&#xff09;是一个广泛使用的路由协议&#xff0c;它的工作过程可以总结为以下几个步骤&#xff1a; 启动与邻居发现 OSPF在配置完成后&#xff0c;会通过本地组播地址224.0.0.5发送HELLO包。HE…...

编程日记 2024/11/3 1:09:54

idea 配置tomcat 服务

选择tomcat的安装路径 选到bin的文件夹的上一层就行...

编程日记 2024/11/3 1:07:52

.net core 接口,动态接收各类型请求的参数

[HttpPost] public async Task<IActionResult> testpost([FromForm] object info) { //Postman工具测试结果&#xff1a; //FromBody,Postman的body只有rawjson时才进的来 //参数为空时&#xff0c;Body(form-data、x-www-form-urlencoded)解析到的数据也有所…...

编程日记 2024/11/3 1:04:49

关注！这些型号SSD有Windows蓝屏问题需要修复

近期&#xff0c;在闪迪官方有一个SSD FW升级提醒&#xff0c;主要是为了解决Windows 11 24H2系统蓝屏的问题&#xff1a; Fix问题&#xff1a;这些SSD的主机内存缓冲区&#xff08;Host Memory Buffer&#xff0c;简称HMB&#xff09;功能可能会导致系统出现蓝屏死机&#xff…...

编程日记 2024/11/3 1:03:48

go语言gin框架平滑关闭——思悟项目技术2

目录 前言 直接关闭的缺陷 平滑关闭的使用场景 例子 思悟项目&#xff1a; golang qq邮件发送验证码——思悟项目技术1 前言 平滑关闭&#xff08;graceful shutdown&#xff09;是指在停止服务时&#xff0c;能够让现有的连接、任务或者操作优雅地完成&#xff0c;而不是…...

编程日记 2024/11/3 1:01:46

K8S flannel网络模式对比

K8S flannel网络模式对比 VXLAN 模式Host-GW 模式如何查看 Flannel 的网络模式？如何修改 Flannel 的网络模式？如何修改flannel vxlan端口？Flannel 是一个 Kubernetes 中常用的网络插件，用于在集群中的节点之间提供网络连接。Flannel 提供了多种后端实现方式，vxlan 和 host…...

编程日记 2024/11/3 1:00:45

Vue前端框架：Vue前端项目文件目录

文章目录 package.json 文件node_modulessrc&#xff08;Source Code 的缩写&#xff09;文件夹主要子文件夹及内容 publicdist package.json 文件 所在文件夹&#xff08;通常是项目根目录&#xff09; 虽然 package.json 本身不是一个文件夹&#xff0c;但它所在的文件夹&a…...

编程日记 2024/11/3 0:59:44

git回滚到指定的提交

如果你想回滚到特定的提交&#xff08;例如 aa0ca72c&#xff09;&#xff0c;并且丢弃之后的所有更改&#xff0c;可以使用 git reset 命令。请注意&#xff0c;git reset 会改变你的提交历史&#xff0c;所以在多人协作项目中应谨慎使用。如果已经推送到远程仓库&#xff0c;…...

编程日记 2024/11/3 0:57:42

手机怎么玩森林之子？远程玩森林之子教程

你喜欢《森林之子》这款开放世界恐怖生存模拟游戏吗&#xff1f;玩家会被派到一座孤岛上&#xff0c;寻找一位失踪的亿万富翁&#xff0c;并深陷被食人生物占领的地方。你需要制作工具和武器、建造房屋&#xff0c;倾尽全力生存下去&#xff0c;无论独自一人还是与朋友一起。如…...

编程日记 2024/11/3 0:56:40

深度学习之网络与计算

1 网络操作与计算 1.1 前向传播与反向传播&#xff1f; 神经网络的计算主要有两种&#xff1a;前向传播&#xff08;foward propagation, FP&#xff09;作用于每一层的输入&#xff0c;通过逐层计算得到输出结果&#xff1b;反向传播&#xff08;backward propagation, BP&a…...

编程日记 2024/11/3 0:54:37

《JVM第1课》Java 跨平台原理

无痛快速学习JVM&#xff0c;欢迎订阅本免费专栏 JVM Java的特性就是程序员一次编写&#xff0c;到处运行&#xff0c;意思是我们只需要写一份代码&#xff0c;就可以在不同的操作系统&#xff08;windows、Linux、Mac OS等&#xff09;中运行。但是不同的操作系统能看懂的指令…...

编程日记 2024/11/3 0:50:32

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30目录1. Step Guided Reasoning: Improving Mathematical Reasoning using Guidance Generation and Step Reasoning摘要研究背…...

编程日记 2024/11/3 0:49:30

加强版 第五节图像处理与视频分析

基本概念 图像轮廓 主要针对二值图像&#xff0c;轮廓是一系列点 vector<vector<Point>xxx用于存储多个点 vector<Vec4i>xxx包含四个整数&#xff0c;分别代表下一个轮廓的索引&#xff0c;上一个轮廓的索引&#xff0c;一个子轮廓的索引和父轮廓的索引 相…...

编程日记 2024/11/3 0:47:28

Orleans8.2入门测试

微软官方文档&#xff1a;快速入门&#xff1a;使用 ASP.NET Core 生成第一个 Orleans 应用 - .NET | Microsoft Learn 项目及引入的nuget库&#xff1a; 1、接口项目&#xff1b;2、接口实现项目&#xff1b;3、silo项目&#xff1b;4、客户端项目 其中Microsoft.Orleans.St…...

编程日记 2024/11/3 0:46:26

【Linux 25】网络套接字 socket 概念

文章目录 &#x1f308; 一、IP 地址概念⭐ 1. IP 地址的作用⭐ 2. 源 IP 地址和目的 IP 地址 &#x1f308; 二、端口号概念⭐ 1. 源端口号和目的端口号⭐ 2. 端口号范围划分⭐ 3. 端口号 VS 进程 ID⭐ 4. 套接字 socket 的概念 &#x1f308; 三、传输层的典型代表协议⭐ 1. …...

编程日记 2024/11/3 0:45:25

python openai 通过Function Call 创建自动化任务

目录 一、什么是Function Call（函数掉用） 1. 功能概述 2. 工作原理 二、如何实现函数调用 1、定义自己的get_weather 函数 2、给助手添加函数调用 3、写好instrction，指导assistant去掉用你定义的方法。 4、最后也是最重要的，捕获 Assistant 的 Function Call 三、…...

编程日记 2024/11/3 0:44:24

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/9/9 10:12:54

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/8/18 10:21:48

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/12 10:25:58

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/7/23 10:55:13

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/9/13 0:08:57

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/8/26 13:03:54

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/9/16 17:30:56

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42