js实现canvas正方形点点汇聚成爱心悬浮变色表白代码-html代码-BFW代码库

js实现canvas正方形点点汇聚成爱心悬浮变色表白代码

代码语言：html

所属分类：表白

代码描述：js实现canvas正方形点点汇聚成爱心悬浮变色表白代码

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

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background: white;
        }
 
        #myCanvas {
            display: block;
        }
    </style>
</head>
 
<body>
    <canvas width="400" height="300" id="myLove"></canvas>

<script type="text/javascript">
    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window
            .oRequestAnimationFrame ||
            window.msRequestAnimationFrame || function (callback) {
                window.setTimeout(callback,  1000/ 60);
            };
    })();
    /* *basicstuff */
    var FX = {
        config: {
            background: 'rgba(250,250,250,0.2)',
            color: 'rgb(250,0,0)', //初始的颜色 
            highlight: 'rgb(0,250,0)' //鼠标经过de鼠标经过的颜色 
        },
        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],
             .........完整代码请登录后点击上方下载按钮下载查看