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.cl.........完整代码请登录后点击上方下载按钮下载查看