js实现悬浮爱心粒子动画效果代码-html代码-BFW代码库

js实现悬浮爱心粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现悬浮爱心粒子动画效果代码

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

<html lang="en">
<head>

    <meta charset="UTF-8">




    <style>
        body {
            margin: 0;
            padding: 0;
            background: white;
        }

        #myCanvas {
            display: block;
        }
    </style>




</head>

<body>
    <!-- Happy Valentines Day! -->
    <canvas width="710" height="359" id="myLove"></canvas>


    <script>
        window.requestAnimFrame = function () {
            return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        }();


        /*
 * basic stuff
 */
        var FX = {
            config: {
                background: 'rgba(250,250,250,0.2)',
                color: 'rgb(250,20,75)',
                highlight: 'rgb(250,20,20)'
            },

            dots: []
        };


        FX.canvas = document.getElementById('myLove');
        FX.ctx = FX.canvas.getContext('2d');


        /*
 * Extend Math Object
 */
        Math.TO_RAD = Math.PI / 180;

        Math.getDistance = function (x1, y1, x2, y2) {

            var xs = 0,
            ys = 0;

            xs = x1 - x2;
            ys = y1 - y2;
            xs = xs * xs;
            ys = ys * ys;

            return Math.sqrt(xs + ys);
        };

        Math.getDegree = function (x1, y1, x2, y2) {

            var dx = x2 - x1,
            dy = y2 - y1;

            return Math.atan2(dy, d.........完整代码请登录后点击上方下载按钮下载查看