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=&#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实现的鼠标跟随自定义发光线条源码

源码介绍

效果预览

源码如下

腾讯云AI代码助手编程挑战赛：生成Html5小游戏

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

HTML5学习记录

HTML5使用favicon.ico图标

HTML5 教程之标签（3）

绚丽烟花：HTML5 Canvas 烟花效果实现（文末附完整代码）

HTML5画布，2024年最新自学编程找工作好找吗

springboot基于html5的网上团购系统设计与实现论文

springboot-基于html5的民谣网站的设计与实现

HTML5期末考核大作业，个人网站—— 程序员个人简历模板下载HTML CSS JavaScript (2)

前端哥

C/C | 每日一练 (2)

Linux性能监控工具汇总

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码数据库文档)

DeepSeek 提示词：定义、作用、分类与设计原则

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

Python常见面试题的详解16

Docker实战-使用docker compose搭建博客

QQ登录测试用例报告

乐享数科：供应链金融—三个不同阶段的融资模式

【Deepseek】Linux 本地部署 Deepseek

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

3
CSS常用属性（文本属性）

2024-11-04 09:11:111000

4
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

5
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

6
vue使用datav echarts

2024-09-06 00:09:381000

7
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

8
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

9
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

10
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

	<!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实现的鼠标跟随自定义发光线条源码

源码介绍

效果预览

源码如下

微信扫一扫：分享