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

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

article 2025/1/19 3:21:00

源码介绍

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>