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

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

news 2025/7/20 3:00:55

代码如下

<!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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/7/18 12:38:23

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/7/19 7:38:29

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/7/17 9:42:45

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/7/18 0:31:27

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/7/18 23:24:47

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/7/15 19:36:33

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/7/19 3:20:40

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/7/7 17:01:50

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/7/18 14:44:07