The particle effect of HTML5 canvas

Rendering:
JavaScript code implementation:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        html,body{width:100%:height:100%;overflow:hidden;}
    </style>
</head>
<body>
<canvas width="1280" height="910" id="c1"></canvas>
<script>
var body = document.body;
var canvasObj = document.getElementById("c1");
var canvas2d = canvasObj.getContext("2d");
var arr = [];
var count = 300;
var mouse = {};
document.onmousemove = function(evt) {
    var e = evt || window.event;
    mouse = {
        xx: e.clientX,
        yy: e.clientY
    }
}
document.onmouseleave = function() {
    mouse = undefined;
}
document.oncontextmenu = function() {
    return false;
}

function ty() {
    canvas2d.clearRect(0, 0, canvasObj.width, canvasObj.height);
    for (var i = 0; i < count; i++) {
        if (arr.length != count) {
            p = {
                x: Math.floor(Math.random() * body.clientWidth),
                y: Math.floor(Math.random() * body.clientHeight),
                vx: 1 - Math.random() * 2,
                vy: 1 - Math.random() * 2,
                num: 0
            }
        } else {
            p = hua (arr [i]);
        }
        canvas2d.fillStyle = "deepskyblue";
        canvas2d.fillRect(p.x, p.y, 2, 2);
        arr[i] = p;
    }
    jiance(mouse);
}
setInterval(ty, 10);

function hua(p) {
    var a = p;
    if (p.x <= 0 || p.x >= canvasObj.width) {
        a.vx = -p.vx;
        a.x += a.vx;
    } else if (p.y <= 0 || p.y >= canvasObj.height) {
        a.vy = -a.vy;
        ay + = a.vy;
    } else {
        a = {
            x: a.x + a.vx,
            y: ay + a.vy,
            vx: a.vx,
            you: a.vy,
            num: 0
        }
    }
    return a;
}

function jiance(mouse) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr.length; j++) {
            if (i != j) {
                var len = Math.round(arr[i].x - arr[j].x) * Math.round(arr[i].x - arr[j].x) + Math.round(arr[i].y - arr[j].y) * Math.round(arr[i].y - arr[j].y)
                if (len <= 5000 && arr[i].num < 6) {
                    arr[i].num++;
                    canvas2d.lineWidth = 0.5 - len / 2000;
                    canvas2d.beginPath();
                    canvas2d.strokeStyle = "lime";
                    canvas2d.moveTo(arr[i].x + 2, arr[i].y + 2);
                    canvas2d.lineTo(arr[j].x, arr[j].y);
                    canvas2d.stroke();
                }
            }
        }
        if (mouse) {
            var leng = Math.round(arr[i].x - mouse.xx) * Math.round(arr[i].x - mouse.xx) + Math.round(arr[i].y - mouse.yy) * Math.round(arr[i].y - mouse.yy);
            if (leng > 5000 && leng <= 20000) {
                arr[i].x = arr[i].x + (mouse.xx - arr[i].x) / 20;
                arr[i].y = arr[i].y + (mouse.yy - arr[i].y) / 20;
            }
            if (leng <= 20000) {
                canvas2d.lineWidth = 1;
                canvas2d.strokeStyle = "yellow";
                canvas2d.beginPath();
                canvas2d.moveTo(arr[i].x, arr[i].y);
                canvas2d.lineTo(mouse.xx, mouse.yy);
                canvas2d.stroke();
            }
        }
    }
}
console.log("application is running!");
</script>
</body>
</html>
The particle effect of HTML5 canvas

Guess you like
