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. 定义：设函数在闭区间上有界。在闭区间上任意插入若干个分点，即， 此时每个小区间的长度记作(不一定是等分的)。然后在每个小区间上任意取，对应的函数值为。 为保证每段的值(即矩形面积)无…...
小米智能家居无缝接入Home Assistant的3种高效方法
小米智能家居无缝接入Home Assistant的3种高效方法 【免费下载链接】ha_xiaomi_home Xiaomi Home Integration for Home Assistant 项目地址: https://gitcode.com/GitHub_Trending/ha/ha_xiaomi_home Xiaomi Home集成是小米官方为Home Assistant提供的智能家居集成组件…...
成为技术专家的捷径？不，只有长期主义的坚持
在软件测试领域，我们常常被一种“速成”的幻象所包围。铺天盖地的培训广告承诺“三个月精通自动化测试”、“六周成为性能测试专家”，各种“一招鲜”的测试工具和“万能”的测试框架被包装成通往成功的捷径。对于身处其中、渴望突破职业瓶颈的测试工程师…...
HunyuanVideo-Foley快速入门：VSCode远程开发与模型调试指南
HunyuanVideo-Foley快速入门：VSCode远程开发与模型调试指南 1. 前言：为什么选择VSCode远程开发？ 如果你正在使用HunyuanVideo-Foley这类音效生成模型，可能会遇到这样的困扰：本地机器性能不足，而云服务器虽…...
ai辅助开发，让快马平台智能优化你的openclaw脚本安全性与性能
今天想和大家分享一个实用技巧：如何用AI辅助开发，在InsCode(快马)平台上优化openclaw脚本的安全性与性能。最近我需要一个能智能清理下载文件夹的脚本，但又要避免误删重要文件，这个需求让我深刻体会到AI辅助开发的便利性。 需求分…...
LangGraph多智能体框架：构建持久化AI智能体的终极指南 [特殊字符]
LangGraph多智能体框架：构建持久化AI智能体的终极指南 🚀 【免费下载链接】langgraph Build resilient language agents as graphs. 项目地址: https://gitcode.com/GitHub_Trending/la/langgraph 在当今快速发展的AI领域，多智能体框架…...
ai赋能开发：让快马智能助手帮你诊断和优化openclaw ubuntu部署难题
最近在Ubuntu上部署OpenClaw项目时，遇到了不少头疼的问题。从依赖冲突到参数调优，每一步都可能踩坑。不过我发现，借助AI辅助开发工具，这些问题可以变得更可控。今天就来分享下如何构建一个AI工具箱来优化OpenClaw的部署和开发体验…...
GLM-OCR完整教程：部署、使用、API、案例，一篇搞定所有
GLM-OCR完整教程：部署、使用、API、案例，一篇搞定所有 1. GLM-OCR简介与核心优势 GLM-OCR是一款基于先进多模态架构的OCR识别工具，专为解决复杂文档理解问题而设计。与市面上大多数OCR工具不同，它不仅能识别文字，还能…...
机器学习在医疗诊断中的应用
机器学习在医疗诊断中的应用 【免费下载链接】Zettlr Your One-Stop Publication Workbench 项目地址: https://gitcode.com/GitHub_Trending/ze/Zettlr 背景 [[医疗诊断现状分析]]显示当前诊断方法的局限性。 方法 基于[[机器学习基础概念]]中的监督学习方法。 应用…...
QModMaster：5分钟掌握免费开源ModBus调试工具终极指南
QModMaster：5分钟掌握免费开源ModBus调试工具终极指南 【免费下载链接】qModbusMaster 项目地址: https://gitcode.com/gh_mirrors/qm/qModbusMaster 你是否在为工业设备调试而烦恼？面对复杂的ModBus通信协议，商业软件价格昂贵&#…...
Realtek 8852AE Wi-Fi 6驱动深度解析与实战指南
Realtek 8852AE Wi-Fi 6驱动深度解析与实战指南 【免费下载链接】rtw89 Driver for Realtek 8852AE, an 802.11ax device 项目地址: https://gitcode.com/gh_mirrors/rt/rtw89 问题引入：Wi-Fi 6网卡在Linux环境下的兼容性挑战 当您的Linux系统无法识别Realt…...