• Html编写发射粒子爱心

     

    1. <!DOCTYPE html>
    2. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    3.     
    4.     <title>💗</title>
    5.     <style>
    6.         canvas {
    7.             position: absolute;
    8.             left: 0;
    9.             top: 0;
    10.             width: 100%;
    11.             height: 100%;
    12.             background-color: rgba(0, 0, 0, .2);
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.  
    18. <canvas id="heart" width="1920" height="947"></canvas>
    19. <script>
    20.     window.requestAnimationFrame =
    21.         window.__requestAnimationFrame ||
    22.         window.requestAnimationFrame ||
    23.         window.webkitRequestAnimationFrame ||
    24.         window.mozRequestAnimationFrame ||
    25.         window.oRequestAnimationFrame ||
    26.         window.msRequestAnimationFrame ||
    27.         (function () {
    28.             return function (callback, element) {
    29.                 var lastTime = element.__lastTime;
    30.                 if (lastTime === undefined) {
    31.                     lastTime = 0;
    32.                 }
    33.                 var currTime = Date.now();
    34.                 var timeToCall = Math.max(1, 33 - (currTime - lastTime));
    35.                 window.setTimeout(callback, timeToCall);
    36.                 element.__lastTime = currTime + timeToCall;
    37.             };
    38.         })();
    39.     window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));
    40.     var loaded = false;
    41.     var init = function () {
    42.         if (loaded) return;
    43.         loaded = true;
    44.         var mobile = window.isDevice;
    45.         var koef = mobile ? 0.5 : 1;
    46.         var canvas = document.getElementById('heart');
    47.         var ctx = canvas.getContext('2d');
    48.         var width = canvas.width = koef * innerWidth;
    49.         var height = canvas.height = koef * innerHeight;
    50.         var rand = Math.random;
    51.         ctx.fillStyle = "rgba(0,0,0,1)";
    52.         ctx.fillRect(0, 0, width, height);
    53.  
    54.         var heartPosition = function (rad) {
    55.             //return [Math.sin(rad), Math.cos(rad)];
    56.             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))];
    57.         };
    58.         var scaleAndTranslate = function (pos, sx, sy, dx, dy) {
    59.             return [dx + pos[0] * sx, dy + pos[1] * sy];
    60.         };
    61.  
    62.         window.addEventListener('resize', function () {
    63.             width = canvas.width = koef * innerWidth;
    64.             height = canvas.height = koef * innerHeight;
    65.             ctx.fillStyle = "rgba(0,0,0,1)";
    66.             ctx.fillRect(0, 0, width, height);
    67.         });
    68.  
    69.         var traceCount = mobile ? 20 : 50;
    70.         var pointsOrigin = [];
    71.         var i;
    72.         var dr = mobile ? 0.3 : 0.1;
    73.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));
    74.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));
    75.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));
    76.         var heartPointsCount = pointsOrigin.length;
    77.  
    78.         var targetPoints = [];
    79.         var pulse = function (kx, ky) {
    80.             for (i = 0; i < pointsOrigin.length; i++) {
    81.                 targetPoints[i] = [];
    82.                 targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;
    83.                 targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;
    84.             }
    85.         };
    86.  
    87.         var e = [];
    88.         for (i = 0; i < heartPointsCount; i++) {
    89.             var x = rand() * width;
    90.             var y = rand() * height;
    91.             e[i] = {
    92.                 vx: 0,
    93.                 vy: 0,
    94.                 R: 2,
    95.                 speed: rand() + 5,
    96.                 q: ~~(rand() * heartPointsCount),
    97.                 D: 2 * (i % 2) - 1,
    98.                 force: 0.2 * rand() + 0.7,
    99.                 f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",
    100.                 trace: []
    101.             };
    102.             for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};
    103.         }
    104.  
    105.         var config = {
    106.             traceK: 0.4,
    107.             timeDelta: 0.01
    108.         };
    109.  
    110.         var time = 0;
    111.         var loop = function () {
    112.             var n = -Math.cos(time);
    113.             pulse((1 + n) * .5, (1 + n) * .5);
    114.             time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;
    115.             ctx.fillStyle = "rgba(0,0,0,.1)";
    116.             ctx.fillRect(0, 0, width, height);
    117.             for (i = e.length; i--;) {
    118.                 var u = e[i];
    119.                 var q = targetPoints[u.q];
    120.                 var dx = u.trace[0].x - q[0];
    121.                 var dy = u.trace[0].y - q[1];
    122.                 var length = Math.sqrt(dx * dx + dy * dy);
    123.                 if (10 > length) {
    124.                     if (0.95 < rand()) {
    125.                         u.q = ~~(rand() * heartPointsCount);
    126.                     } else {
    127.                         if (0.99 < rand()) {
    128.                             u.D *= -1;
    129.                         }
    130.                         u.q += u.D;
    131.                         u.q %= heartPointsCount;
    132.                         if (0 > u.q) {
    133.                             u.q += heartPointsCount;
    134.                         }
    135.                     }
    136.                 }
    137.                 u.vx += -dx / length * u.speed;
    138.                 u.vy += -dy / length * u.speed;
    139.                 u.trace[0].x += u.vx;
    140.                 u.trace[0].y += u.vy;
    141.                 u.vx *= u.force;
    142.                 u.vy *= u.force;
    143.                 for (k = 0; k < u.trace.length - 1;) {
    144.                     var T = u.trace[k];
    145.                     var N = u.trace[++k];
    146.                     N.x -= config.traceK * (N.x - T.x);
    147.                     N.y -= config.traceK * (N.y - T.y);
    148.                 }
    149.                 ctx.fillStyle = u.f;
    150.                 for (k = 0; k < u.trace.length; k++) {
    151.                     ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);
    152.                 }
    153.             }
    154.             ctx.fillStyle = "rgba(255,255,255,1)";
    155.             for (i = u.trace.length + 13; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);
    156.  
    157.             window.requestAnimationFrame(loop, canvas);
    158.         };
    159.         loop();
    160.     };
    161.  
    162.     var s = document.readyState;
    163.     if (s === 'complete' || s === 'loaded' || s === 'interactive') init();
    164.     else document.addEventListener('DOMContentLoaded', init, false);
    165. </script>
    166.  
    167. </body></html>

  • 相关阅读:
    【分享】科大讯飞星火认知大模型（初体验）
    【java8】函数式接口
    Java中根据中文汉字获取首字母
    JVM线上监控环境搭建Grafana+Prometheus+Micrometer
    【vulhub】PostGresql高权限命令执行漏洞复现(CVE-2019-9193)
    栈的概念及用法
    数学建模常用模型
    如何发现新的潜力项目？工具推荐
    冠达管理：紧盯必要性 追问合理性 再融资问询透露监管新动向
    魔众文库系统 v5.6.0 DWG文件格式支持，部分数据封面显示异常，定时调度清理临时文件
  • 原文地址：https://blog.csdn.net/m0_58419490/article/details/143416328