canvas鼠标拖动多彩发光线条粒子散落动画效果代码-html代码-BFW代码库

canvas鼠标拖动多彩发光线条粒子散落动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas鼠标拖动多彩发光线条粒子散落动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <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() {
  .........完整代码请登录后点击上方下载按钮下载查看