heart

2023-08-13 22:05:04

好久没写博客了，不想废话，直接欣赏效果！

点击这里，查看完美效果！

附完整代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>heart nick</title>

    <style>

        canvas {

            position: absolute;

            left:0;

            top: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0,0,0,.2);

        }

    </style>

<script>

    window.requestAnimationFrame =

            window.__requestAnimationFrame ||

            window.requestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.oRequestAnimationFrame ||

            window.msRequestAnimationFrame ||

            (function () {

                return function (callback, element) {

                    var lastTime = element.__lastTime;

                    if (lastTime === undefined) {

                        lastTime = 0;

                    }

                    var currTime = Date.now();

                    var timeToCall = Math.max(1, 33 - (currTime - lastTime));

                    window.setTimeout(callback, timeToCall);

                    element.__lastTime = currTime + timeToCall;

                };

            })();

    window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));

    var loaded = false;

    var init = function () {

        if (loaded) return;

        loaded = true;

        var mobile = window.isDevice;

        var koef = mobile ? 0.5 : 1;

        var canvas = document.getElementById('heart');

        var ctx = canvas.getContext('2d');

        var width = canvas.width = koef * innerWidth;

        var height = canvas.height = koef * innerHeight;

        var rand = Math.random;

        ctx.fillStyle = "rgba(0,0,0,1)";

        ctx.fillRect(0, 0, width, height);

        var heartPosition = function (rad) {

            //return [Math.sin(rad), Math.cos(rad)];

            return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];

        };

        var scaleAndTranslate = function (pos, sx, sy, dx, dy) {

            return [dx + pos[0] * sx, dy + pos[1] * sy];

        };

        window.addEventListener('resize', function () {

            width = canvas.width = koef * innerWidth;

            height = canvas.height = koef * innerHeight;

            ctx.fillStyle = "rgba(0,0,0,1)";

            ctx.fillRect(0, 0, width, height);

        });

        var traceCount = mobile ? 20 : 50;

        var pointsOrigin = [];

        var i;

        var dr = mobile ? 0.3 : 0.1;

        for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));

        for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));

        for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));

        var heartPointsCount = pointsOrigin.length;

        var targetPoints = [];

        var pulse = function (kx, ky) {

            for (i = 0; i < pointsOrigin.length; i++) {

                targetPoints[i] = [];

                targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;

                targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;

            }

        };

        var e = [];

        for (i = 0; i < heartPointsCount; i++) {

            var x = rand() * width;

            var y = rand() * height;

            e[i] = {

                vx: 0,

                vy: 0,

                R: 2,

                speed: rand() + 5,

                q: ~~(rand() * heartPointsCount),

                D: 2 * (i % 2) - 1,

                force: 0.2 * rand() + 0.7,

                f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",

                trace: []

            };

            for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};

        }

        var config = {

            traceK: 0.4,

            timeDelta: 0.01

        };

        var time = 0;

        var loop = function () {

            ctx.font="50px Arial";

            ctx.fillStyle='red';

            ctx.fillText("ejiao",20,60);

            ctx.fillText("happay",canvas.width-190,60);

            ctx.fillText("every",20,canvas.height-30);

            ctx.fillText("day",canvas.width-100,canvas.height-30);

            var n = -Math.cos(time);

            pulse((1 + n) * .5, (1 + n) * .5);

            time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;

            ctx.fillStyle = "rgba(0,0,0,.1)";

            ctx.fillRect(0, 0, width, height);

            for (i = e.length; i--;) {

                var u = e[i];

                var q = targetPoints[u.q];

                var dx = u.trace[0].x - q[0];

                var dy = u.trace[0].y - q[1];

                var length = Math.sqrt(dx * dx + dy * dy);

                if (10 > length) {

                    if (0.95 < rand()) {

                        u.q = ~~(rand() * heartPointsCount);

                    }

                    else {

                        if (0.99 < rand()) {

                            u.D *= -1;

                        }

                        u.q += u.D;

                        u.q %= heartPointsCount;

                        if (0 > u.q) {

                            u.q += heartPointsCount;

                        }

                    }

                }

                u.vx += -dx / length * u.speed;

                u.vy += -dy / length * u.speed;

                u.trace[0].x += u.vx;

                u.trace[0].y += u.vy;

                u.vx *= u.force;

                u.vy *= u.force;

                for (k = 0; k < u.trace.length - 1;) {

                    var T = u.trace[k];

                    var N = u.trace[++k];

                    N.x -= config.traceK * (N.x - T.x);

                    N.y -= config.traceK * (N.y - T.y);

                }

                ctx.fillStyle = u.f;

                for (k = 0; k < u.trace.length; k++) {

                    ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);

                }

            }

            //ctx.fillStyle = "rgba(255,255,255,1)";

            //for (i = u.trace.length; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);

            window.requestAnimationFrame(loop, canvas);

        };

        loop();

    };

    var s = document.readyState;

    if (s === 'complete' || s === 'loaded' || s === 'interactive') init();

    else document.addEventListener('DOMContentLoaded', init, false);

</script>

</head>

<body>

<canvas id="heart"></canvas>

</body>

</html>

随机推荐

  1. TSQL 分组集（Grouping Sets）

    分组集(Grouping Sets)是多个分组的并集,用于在一个查询中,按照不同的分组列对集合进行聚合运算,等价于对单个分组使用“union all”,计算多个结果集的并集.使用分组集的聚合查询,返回 ...

  2. jquery实现页面交互的几个小例子

    翻看了以前留下的笔记,发现自己竟然做过这么多的页面交互效果,没有使用原生js,全是通过jquery实现的,于是把他们整理下来,附上表现效果图及源代码 1 业务应用:授权商品组和删除商品组 本质:复选框 ...

  3. 如何导出chrome已安装的拓展程序

    如何导出chrome已安装的拓展程序 已安装的chrome插件可以在浏览区中输入*chrome://extensions*便可以查看插件列表. 对于windows系统来说,这些插件对应的目录为: C: ...

  4. vuex action 与mutations 的区别

    面试没说清楚.这个太丢人回来整理下: 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步 ...

  5. java源代码

    //信1705-1 20173527 刘津鑫 package money; import java.io.IOException; import java.io.Serializable; impor ...

  6. Codeforces Round &num;540 &lpar;Div&period; 3&rpar;--1118C - Palindromic Matrix

    https://codeforces.com/contest/1118/problem/C 在查找元素的时候,必须按4,2,1的顺序进行.因为,如果先找1,可能就把原来的4拆散了,然后再找4,就找不到 ...

  7. Sql Server Tempdb原理-日志机制解析实践

    笔者曾经在面试DBA时的一句”tempdb为什么比其他数据库快?”使得95%以上的应试者都一脸茫然.Tempdb作为Sqlserver的重要特征,一直以来大家对它可能即熟悉又陌生.熟悉是我们时时刻刻都 ...

  8. java 判断字符串IP合法性以及获取IP的数值形式

    /** * 计算传入的IP地址的数字IP*/ public static long getIpNum(String ip) { long ipNum = 0; if (StringUtils.isNo ...

  9. OS之内存管理 ---基本的内存管理策略（一）

    基本概念 基本硬件 CPU可以直接访问的通用存储只有内存和处理器的内置的寄存器.机器指令可以用内存地址作为参数,而不能用磁盘地址作为参数.所以执行指令以及指令使用的数据,应在这些可执行访问的存储设备上 ...

  10. HDU 6203 ping ping ping &lbrack;LCA，贪心，DFS序，BIT&lpar;树状数组&rpar;&rsqb;

    题目链接:[http://acm.hdu.edu.cn/showproblem.php?pid=6203] 题意 :给出一棵树,如果(a,b)路径上有坏点,那么(a,b)之间不联通,给出一些不联通的点 ...

上一篇：JavaWeb 后端 <三> 之 Response Request 学习笔记


下一篇：HTTL之初印象