HTML5+Canvas实现的鼠标跟随自定义发光线条源码
源码介绍
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=https://www.qqmu.com"><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…...
关于jwt和security
JSON Web Token（缩写 JWT） 目前最流行、最常见的跨域认证解决方案，前端后端都需要会使用的东西-腾讯云开发者社区-腾讯云 SpringBoot整合Security安全框架、控制权限让我们一起来看看Security吧！我想每个写项目的人，都…...
统计学习算法——逻辑斯谛回归
内容来自B站Up主：动画讲编程https://www.bilibili.com/video/BV1CR4y1L7RC、风中摇曳的小萝卜https://www.bilibili.com/video/BV17r4y137bW，仅为个人学习所用。 极大似然估计 几率、概率与似然 几率是指某个事件发生的可能性与不发生的可能性之比&am…...
算法（蓝桥杯）贪心算法5——删数问题的解题思路
问题描述 给定一个高精度的正整数 n（n≤1000 位），需要删除其中任意 s 个数字，使得剩下的数字按原左右顺序组成一个新的正整数，并且这个新的正整数最小。例如，对于数字 153748，删除 2 个数字后&a…...
数字孪生发展及应用
一、数字孪生的前世今生 （一）萌芽的种子：概念的首次提出 数字孪生的概念最早可追溯到 20 世纪 60 年代，美国国家航空航天局（NASA）在阿波罗计划中，为了训练宇航员和指挥控制人员，使用…...
MYSQL对表的增删改查
表的基本操作 创建表create table [if not exists] <tableName> (<columnName> <columnType> [constraints] [comment] , ...<columnName> <columnType> [constraints] [comment] ) ;删除表drop table [if exists] <tableName> ;…...
左神算法基础提升--4
文章目录 树形dp问题Morris遍历 树形dp问题 求解这个问题需要用到我们在基础班上学到的从节点的左子树和右子树上拿信息的方法。 求最大距离主要分为两种情况：1.当前节点参与最大距离的求解；2.当前节点不参与最大距离的求解； 1.当前节点参与最…...
【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…...
CloudberryDB（四）并行执行
要查看CloudberryDB & Greenplum数据库的并行度配置，可以使用以下几种方法： ### 方法一：使用SHOW命令 在Greenplum数据库中，可以使用SHOW命令来查看当前的并行度配置。例如： sql SHOW gp_parallel_degree ; SH…...
LARGE LANGUAGE MODELS ARE HUMAN-LEVEL PROMPT ENGINEERS
题目 大型语言模型是人类级别的提示工程师 论文地址：https://arxiv.org/abs/2211.01910 项目地址：https://github.com/keirp/automatic_prompt_engineer 摘要 通过对自然语言指令进行调节，大语言模型 (LLM) 显示了作为通用计算机的令人印象深…...
rabbitmq安装延迟队列
在RabbitMQ中，延迟队列是一种特殊的队列类型。当消息被发送到此类队列后，不会立即投递给消费者，而是会等待预设的一段时间，待延迟期满后才进行投递。这种队列在多种场景下都极具价值，比如可用于处理需要在特定时间触发…...
 入门指南)
Kubernetes (K8s) 入门指南
Kubernetes (K8s) 入门指南 什么是Kubernetes？ Kubernetes，通常简称为 K8s（因为从 “K” 到 “s” 之间有八个字符），是一个开源的容器编排平台，用于自动化部署、扩展和管理容器化应用程序。它最初由谷歌设…...
Python 调用 Ollama 库：本地大语言模型使用详解
ollama 是一个用于调用本地大语言模型（Large Language Models，LLMs）的 Python 库，旨在提供简单、高效的 API 接口，以便开发者能够方便地与本地的大语言模型进行交互。以下是关于如何在 Python 中使用 ollama 库的详细介…...
python matplotlib绘图，显示和保存没有标题栏和菜单栏的图像
目录 1. 使用plt.savefig保存无边框图形 2. 显示在屏幕上，并且去掉窗口的标题栏和工具栏 3. 通过配置 matplotlib 的 backend 和使用 Tkinter（或其他图形库） 方法 1：使用 TkAgg 后端，并禁用窗口的工具栏和标题栏 …...
无人机（Unmanned Aerial Vehicle, UAV）路径规划介绍
无人机（Unmanned Aerial Vehicle, UAV）是无人驾驶飞行器的简称。凭借其体积小巧、操作简便、生存能力强等诸多优势，无人机在军事、电力巡检、航空航天与科学研究等诸多领域得到了广泛应用。在执行任务时，无人机可搭载多种传感器设…...
python爬虫入门（实践）
python爬虫入门（实践） 一、对目标网站进行分析 二、博客爬取 获取博客所有h2标题的路由 确定目标，查看源码 代码实现 """ 获取博客所有h2标题的路由 """url "http://www.crazyant.net"import re…...
于灵动的变量变幻间：函数与计算逻辑的浪漫交织（下）
大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。 这一节我们主要来学习单个函数的声明与定义，static和extern… 这里写目录标题 一、单个函数…...
python实现pdf转word和excel
一、引言 在办公中，我们经常遇收到pdf文件格式，因为pdf格式文件不易修改，当我们需要编辑这些pdf文件时，经常需要开通会员或收费功能才能使用编辑功能。今天，我要和大家分享的，是如何使用python编程实现…...
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…...
高等数学学习笔记 ☞ 定积分与积分公式
1. 定积分的基本概念 1.1 定积分的定义 1. 定义：设函数在闭区间上有界。在闭区间上任意插入若干个分点，即， 此时每个小区间的长度记作(不一定是等分的)。然后在每个小区间上任意取，对应的函数值为。 为保证每段的值(即矩形面积)无…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...