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, dx) / Math.TO_RAD;
        };



        /*
 * Dot Object
 */
        var Dot = function (opts) {

            this.color = opts.color;

            this.x = 0;
            this.y = 0;
            this.dest_x = opts.dest_x - 75;
            this.dest_y = opts.dest_y - 75;
        };

        Dot.prototype.update = function () {

            var d = this,
            dist_x = d.dest_x - d.x,
            dist_y = d.dest_y - d.y;

            d.x += dist_x * 0.05;
            d.y += dist_y * 0.05;

            FX.ctx.fillStyle = d.color;
            FX.ctx.fillRect(d.x - 2, d.y - 2, 4, 4);
        };



        /*
 * full screen canvas
 */
        FX.setFullscreen = function () {
            FX.width = FX.canvas.width = window.innerWidth;
            FX.height = FX.canvas.height = window.innerHeight;
        };

        /*
 * Mouse
 */
        FX.handleMouseEvent = function (e, power) {

            var radius = 75,
            k = FX.dots.length,
            i = 0,
            mx,
            my,
            dist,
            degree,
            d;

            if (e.offsetX) {
                mx = e.offsetX;
                my = e.offsetY;
            } else if (e.layerX) {
                mx = e.layerX;
                my = e.layerY;
            }

            mx -= FX.width / 2;
            my -= FX.height / 2;

            for (; i < k; i = i + 1) {

                d = FX.dots[i];

                dist = Math.getDistance(mx, my, d.x, d.y);

                if (dist < radius) {

                    degree = Math.getDegree(d.x, d.y, mx, my);

                    d.x += Math.cos(degree * Math.TO_RAD) * ((radius - dist) * power);
                    d.y += Math.sin(degree * Math.TO_RAD) * ((radius - dist) * power);

                    d.color = FX.config.highlight;

                } else {
                    d.color = FX.config.color;
                }
            }
        };

        /*
 * create the heart
 */
        FX.createHeart = function () {
            var coords = [[1,
                4],
                [1,
                    5],
                [1,
                    6],
                [1,
                    7],
                [1,
                    8],
                [2,
                    3],
                [2,
                    4],
                [2,
                    5],
                [2,
                    6],
                [2,
                    7],
                [2,
                    8],
                [2,
                    9],
                [3,
                    2],
                [3,
                    3],
                [3,
                    4],
                [3,
                    5],
                [3,
                    6],
                [3,
                    7],
                [3,
                    8],
                [3,
                    9],
                [3,
                    10],
                [4,
                    2],
                [4,
                    3],
                [4,
                    4],
                [4,
                    5],
                [4,
                    6],
                [4,
                    7],
                [4,
                    8],
                [4,
                    9],
                [4,
                    10],
                [4,
                    11],
                [5,
                    2],
                [5,
                    3],
                [5,
                    4],
                [5,
                    5],
                [5,
        .........完整代码请登录后点击上方下载按钮下载查看