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

HTML5+Canvas实现的鼠标跟随自定义发光线条源码

news 文章来源：https://blog.csdn.net/huayula/article/details/145172582 2025/2/6 12:08:47

源码介绍

HTML5+Canvas实现的鼠标跟随自定义发光线条特效源码非常炫酷，在黑色的背景中，鼠标滑过即产生彩色变换的发光线条效果，且线条周围散发出火花飞射四溅的粒子光点特效。

效果预览

在这里插入图片描述

源码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="refresh" content="90;url=&#x0068;&#x0074;&#x0074;&#x0070;&#x0073;&#x003a;&#x002f;&#x002f;&#x0077;&#x0077;&#x0077;&#x002e;&#x0071;&#x0071;&#x006d;&#x0075;&#x002e;&#x0063;&#x006f;&#x006d;"><title>Canvas 鼠标跟随的线条闪烁动画</title>
<style>
body {width: 100%;margin: 0;overflow: hidden;background: #000;
}
canvas {width: 100%;height: 100vh;
}
</style>
</head>
<body>
<canvas id="canv" width="450" height="450"></canvas>
<script>
window.requestAnimFrame = (function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 60);};
})();
//vars
var c; //canvas
var $; //context
var ŭ = 0; //color update
var msX = 0; //mouse x
var msY = 0; //mouse y
var prevX = 0; //previous x
var prevY = 0; //previous y
//points array
var pts = new Array();
//sparks array
var sparks = new Array();go();function go() {c = document.getElementById("canv");$ = c.getContext("2d");c.width = window.innerWidth;c.height = window.innerHeight;c.onmousemove = function(e) {prevX = msX;prevY = msY;msX = e.clientX;msY = e.clientY;if (pts.length > 3) {var vel = (Math.abs(prevX - msX) + Math.abs(prevY - msY)) * 0.8;var numsparks = Math.ceil(vel);if (numsparks < 5) {numsparks = 1;}for (var i = 0; i < numsparks; i++) {ŭ -= .5;if (Math.random() > 0.9) {sparks[sparks.length] = new Spark(msX, msY, (prevX - msX) * 0.2, (prevY - msY) * 0.2, vel);}}}};anim();
}function anim() {render();window.requestAnimFrame(anim);
}function render() {$.globalCompositeOperation = "source-over";$.fillStyle = "hsla(0,0%,0%,.2)";$.fillRect(0, 0, c.width, c.height);$.globalCompositeOperation = "lighter";ptSet(msX, msY);sprkSet();
}function ptSet(x, y) {if (pts.length > 30) {pts.shift();}if (x != 0 && y != 0) {pts[pts.length] = new Pt(x, y);}if (pts.length > 10) {for (var i = 2; i < pts.length; i++) {curve(pts[i - 2], pts[i - 1], pts[i]);}}
}function curve(prevPt, midPt, currPt) {$.save();$.beginPath();$.strokeStyle = currPt.color;$.shadowColor = "hsla(" + (ŭ % 360) + ",100%,50%,1)";$.shadowBlur = 15;$.lineWidth = 10;$.moveTo((prevPt.x + midPt.x) * 0.5, (prevPt.y + midPt.y) * 0.5);$.quadraticCurveTo(midPt.x, midPt.y, (midPt.x + currPt.x) * 0.5, (midPt.y + currPt.y) * 0.5);$.stroke();$.restore();}function Pt(x, y) {this.x = x;this.y = y;this.color = "hsla(206, 95%, 95%, 1)";
}function sprkSet() {for (var i = 0; i < sparks.length; i++) {sparks[i].move();}for (i = sparks.length - 1; i >= 0; i--) {if (sparks[i].y > c.height + 20) {sparks.splice(i, 1);}}
}function Spark(x, y, velX, velY, vel) {this.x = x + (vel - Math.random() * vel * 2) * 0.5;this.y = y + (vel - Math.random() * vel * 2) * 0.5;this.vecX = (1 - Math.random() * 2 - Math.random() * velX);this.vecY = (1 - Math.random() * 3 - Math.random() * velY);
}
Spark.prototype.move = function() {this.vecY += 0.15;this.x += this.vecX;this.y += this.vecY;$.save();$.fillStyle = "hsla(" + (ŭ % 360) + ",100%,50%,1)";$.shadowColor = "hsla(" + (ŭ % 360) + ",100%,50%,.3)";$.shadowBlur = 10;$.beginPath();$.arc(this.x, this.y, 2.6, 0, Math.PI * 2, true);$.fill();$.restore();
}
</script>
</body>
</html>

HTML5+Canvas实现的鼠标跟随自定义发光线条源码

源码介绍 HTML5Canvas实现的鼠标跟随自定义发光线条特效源码非常炫酷，在黑色的背景中，鼠标滑过即产生彩色变换的发光线条效果，且线条周围散发出火花飞射四溅的粒子光点特效。效果预览源码如下 <!DOCTYPE html PUBLIC "-//W3C//D…...

编程日记 2025/1/19 15:57:54

关于jwt和security

JSON Web Token（缩写 JWT） 目前最流行、最常见的跨域认证解决方案，前端后端都需要会使用的东西-腾讯云开发者社区-腾讯云 SpringBoot整合Security安全框架、控制权限让我们一起来看看Security吧！我想每个写项目的人，都…...

编程日记 2025/1/19 15:54:50

统计学习算法——逻辑斯谛回归

内容来自B站Up主：动画讲编程https://www.bilibili.com/video/BV1CR4y1L7RC、风中摇曳的小萝卜https://www.bilibili.com/video/BV17r4y137bW，仅为个人学习所用。极大似然估计几率、概率与似然几率是指某个事件发生的可能性与不发生的可能性之比&am…...

编程日记 2025/1/19 15:53:48

算法（蓝桥杯）贪心算法5——删数问题的解题思路

问题描述给定一个高精度的正整数 n（n≤1000 位），需要删除其中任意 s 个数字，使得剩下的数字按原左右顺序组成一个新的正整数，并且这个新的正整数最小。例如，对于数字 153748，删除 2 个数字后&a…...

编程日记 2025/1/19 15:52:47

数字孪生发展及应用

一、数字孪生的前世今生 （一）萌芽的种子：概念的首次提出数字孪生的概念最早可追溯到 20 世纪 60 年代，美国国家航空航天局（NASA）在阿波罗计划中，为了训练宇航员和指挥控制人员，使用…...

编程日记 2025/1/19 15:48:43

表的基本操作创建表create table [if not exists] <tableName> (<columnName> <columnType> [constraints] [comment] , ...<columnName> <columnType> [constraints] [comment] ) ;删除表drop table [if exists] <tableName> ;…...

编程日记 2025/1/19 15:46:39

左神算法基础提升--4

文章目录树形dp问题Morris遍历树形dp问题求解这个问题需要用到我们在基础班上学到的从节点的左子树和右子树上拿信息的方法。求最大距离主要分为两种情况：1.当前节点参与最大距离的求解；2.当前节点不参与最大距离的求解； 1.当前节点参与最…...

编程日记 2025/1/19 15:44:34

【docker踩坑记录】

docker踩坑记录踩坑记录(持续更新中.......)docker images 权限问题踩坑记录(持续更新中…) docker images 权限问题 permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head "http://%2Fvar%2Frun%2Fdocker.s…...

编程日记 2025/1/19 15:43:33

CloudberryDB（四）并行执行

要查看CloudberryDB & Greenplum数据库的并行度配置，可以使用以下几种方法： ### 方法一：使用SHOW命令在Greenplum数据库中，可以使用SHOW命令来查看当前的并行度配置。例如： sql SHOW gp_parallel_degree ; SH…...

编程日记 2025/1/19 15:42:30

LARGE LANGUAGE MODELS ARE HUMAN-LEVEL PROMPT ENGINEERS

题目大型语言模型是人类级别的提示工程师论文地址：https://arxiv.org/abs/2211.01910 项目地址：https://github.com/keirp/automatic_prompt_engineer 摘要通过对自然语言指令进行调节，大语言模型 (LLM) 显示了作为通用计算机的令人印象深…...

编程日记 2025/1/19 15:41:29

rabbitmq安装延迟队列

在RabbitMQ中，延迟队列是一种特殊的队列类型。当消息被发送到此类队列后，不会立即投递给消费者，而是会等待预设的一段时间，待延迟期满后才进行投递。这种队列在多种场景下都极具价值，比如可用于处理需要在特定时间触发…...

编程日记 2025/1/19 15:39:27

Kubernetes (K8s) 入门指南

Kubernetes (K8s) 入门指南什么是Kubernetes？ Kubernetes，通常简称为 K8s（因为从 “K” 到 “s” 之间有八个字符），是一个开源的容器编排平台，用于自动化部署、扩展和管理容器化应用程序。它最初由谷歌设…...

编程日记 2025/1/19 15:37:25

Python 调用 Ollama 库：本地大语言模型使用详解

ollama 是一个用于调用本地大语言模型（Large Language Models，LLMs）的 Python 库，旨在提供简单、高效的 API 接口，以便开发者能够方便地与本地的大语言模型进行交互。以下是关于如何在 Python 中使用 ollama 库的详细介…...

编程日记 2025/1/19 15:34:22

python matplotlib绘图，显示和保存没有标题栏和菜单栏的图像

目录 1. 使用plt.savefig保存无边框图形 2. 显示在屏幕上，并且去掉窗口的标题栏和工具栏 3. 通过配置 matplotlib 的 backend 和使用 Tkinter（或其他图形库） 方法 1：使用 TkAgg 后端，并禁用窗口的工具栏和标题栏 …...

编程日记 2025/1/19 15:29:17

无人机（Unmanned Aerial Vehicle, UAV）路径规划介绍

无人机（Unmanned Aerial Vehicle, UAV）是无人驾驶飞行器的简称。凭借其体积小巧、操作简便、生存能力强等诸多优势，无人机在军事、电力巡检、航空航天与科学研究等诸多领域得到了广泛应用。在执行任务时，无人机可搭载多种传感器设…...

编程日记 2025/1/19 15:25:13

python爬虫入门（实践）

python爬虫入门（实践） 一、对目标网站进行分析二、博客爬取获取博客所有h2标题的路由确定目标，查看源码代码实现 """ 获取博客所有h2标题的路由 """url "http://www.crazyant.net"import re…...

编程日记 2025/1/19 15:24:12

于灵动的变量变幻间：函数与计算逻辑的浪漫交织（下）

大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。这一节我们主要来学习单个函数的声明与定义，static和extern… 这里写目录标题一、单个函数…...

编程日记 2025/1/19 15:20:07

python实现pdf转word和excel

一、引言　　在办公中，我们经常遇收到pdf文件格式，因为pdf格式文件不易修改，当我们需要编辑这些pdf文件时，经常需要开通会员或收费功能才能使用编辑功能。今天，我要和大家分享的，是如何使用python编程实现…...

编程日记 2025/1/19 15:16:01

Pandas使用笔记

个人学习笔记日期转换索引日期格式：2023-09-12 15:00:00 转换为：2023-09-12 import pandas as pd# 假设你的 DataFrame 名为 df，索引是 2023-09-12 15:00:00 # 这里创建一个示例 DataFrame 用于演示 data {value: [1, 2, 3]} index pd…...

编程日记 2025/1/19 15:15:00

高等数学学习笔记 ☞ 定积分与积分公式

1. 定积分的基本概念 1.1 定积分的定义 1. 定义：设函数在闭区间上有界。在闭区间上任意插入若干个分点，即， 此时每个小区间的长度记作(不一定是等分的)。然后在每个小区间上任意取，对应的函数值为。为保证每段的值(即矩形面积)无…...

编程日记 2025/1/19 15:13:58

wow-agent---task2使用llama-index创建Agent

一：创造俩个函数，multiply和add作为fuction calling被LLM当做工具来使用，实现计算一个简单的计算题： from llama_index.llms.ollama import Ollama from llama_index.core.agent import ReActAgent from llama_index.core.tools …...

编程日记 2025/1/19 15:12:57

RabbitMQ实现延迟消息发送——实战篇

在项目中，我们经常需要使用消息队列来实现延迟任务，本篇文章就向各位介绍使用RabbitMQ如何实现延迟消息发送，由于是实战篇，所以不会讲太多理论的知识，还不太理解的可以先看看MQ的延迟消息的一个实现原理再来看这篇文章…...

编程日记 2025/1/19 15:09:54

Oracle 拉链式merge sort join 原理

Oracle 拉链式Merge Sort Join 的原理，我用一个生活中的比喻来解释。 --- 比喻场景：匹配快递包裹和收件人 1. 快递包裹清单想象我们有一个快递公司送货的包裹清单，清单按照收件人的邮编（ZIP Code）排序： …...

编程日记 2025/1/19 15:03:49

QModbusTCPClient占用内存持续增长

最近使用QModbusTCPClient通信，需要频繁发送读写请求，发现软件占用内存一直在增减，经过不断咨询和尝试，终于解决了。 1.方案一（失败） 最开始以为是访问太频繁，导致创建reply的对象比delete re…...

编程日记 2025/1/19 15:00:45

代码中使用 Iterable＜T＞作为方法参数的解释

/*** 根据课程 id 集合查询课程简单信息* param ids id 集合* return 课程简单信息的列表*/ GetMapping("/courses/simpleInfo/list") List<CourseSimpleInfoDTO> getSimpleInfoList(RequestParam("ids") Iterable<Long> ids); 一、代码解释&…...

编程日记 2025/1/19 14:59:42

Oracle数据库传统审计怎么用

Oracle数据库传统审计怎么用审计功能开启与关闭By Session还是By AccessWhenever Successful数据库语句审计数据库对象审计查看审计策略和记录Oracle数据库审计功能分为传统审计（Traditional Auditing）和统一审计（Unified Auditing）。统一审计是从Oracle 12c版本开始引入的…...

编程日记 2025/1/19 14:57:40

leetcode-买卖股票问题

309. 买卖股票的最佳时机含冷冻期 - 力扣（LeetCode） 动态规划解题思路： 1、暴力递归（难点如何定义递归函数） 2、记忆化搜索-傻缓存法（根据暴力递归可变参数确定缓存数组维度） 3、严格表结构依…...

编程日记 2025/1/19 14:48:32

MYSQL学习笔记(三)：分组、排序、分页查询

前言： 学习和使用数据库可以说是程序员必须具备能力，这里将更新关于MYSQL的使用讲解，大概应该会更新30篇，涵盖入门、进阶、高级(一些原理分析);这一篇是讲解分组、排序、分页查询，并且结合案例进行讲解；虽…...

编程日记 2025/1/19 14:45:27

上位机工作感想-2024年工作总结和来年计划

随着工作年限的增增长，发现自己越来越不喜欢在博客里面写一些掺杂自己感想的东西了，或许是逐渐被工作逼得“成熟”了吧。2024年，学到了很多东西，做了很多项目，也帮别人解决了很多问题，唯独没有涨工资。来这…...

编程日记 2025/1/19 14:42:24

【视觉惯性SLAM：十六、 ORB-SLAM3 中的多地图系统】

16.1 多地图的基本概念多地图系统是机器人和计算机视觉领域中的一种关键技术，尤其在 SLAM 系统中具有重要意义。单一地图通常用于表示机器人或相机在环境中的位置和构建的空间结构，但单一地图在以下情况下可能无法满足需求： 大规模场景建图…...

编程日记 2025/1/19 14:37:16

网站设置多少个关键词/百度网址大全免费下载

面试题如何保证缓存与数据库的双写一致性？ 面试官心理分析你只要用缓存，就可能会涉及到缓存与数据库双存储双写，你只要是双写，就一定会有数据一致性的问题，那么你如何解决一致性问题？ 面试题剖析一…...

编程日记 2025/2/6 11:37:51

asp.net做网站后台/香港疫情最新情况

Boris FX Continuum Complete 2020又简称BCC插件2020，是为Adobe软件和OFX而开发的视频特效插件，该插件能够为用户提供了丰富的特效，类型多样，拥有图像恢复，拉伸文本，处理标题和3D对象，色调调节&…...

编程日记 2025/2/6 11:22:44

台州做企业网站/seo怎么收费的

题目链接： Online JudgeOnline Judgehttps://onlinejudge.org/index.php?optioncom_onlinejudge&Itemid8&pageshow_problem&problem780 思路： 自底向上，依次判断各个子天平是否平衡，对于父天平，要判断…...

编程日记 2025/2/6 7:05:34

关于京东商城网站建设的实践报告/网络游戏推广平台

Hadoop是什么？ 适合大数据的分布式存储于计算平台不适用小规模数据作者：Doug Cutting 受Google三篇论文的启发 Hadoop核心项目 HDFS（Hadoop Distrubuted File System） 分布式文件系统 MapReduce 并行计算框架版本 Apache 官方版…...

编程日记 2025/2/6 5:20:45

珠海新盈科技网站建设/关键词英文

好的工具对于提升效率、提高生活品质起到重要作用。梳理和分享下我正在使用的，这个列表长期更新。保护眼睛 flux 过滤蓝光，晚上光线暗的时候不会那么刺眼，我在mac和安卓手机上使用，ios自带类似功能。https://justgetflux.com/白…...

编程日记 2025/2/6 3:46:06

职业技术学院网站建设项目/推广一次多少钱

python自定义的一个字典扩展类，可以让字典操作起来更简单， 比如： 原来需要这样用：dic[website] sharejs.com 有了这个类，你可以这样用：dic.websites sharejs.com 是不是更简单。类定义如下 class easy…...

编程日记 2025/2/6 1:48:41

源码介绍

效果预览

源码如下

相关文章：