

激光汇聚成爱心（Python）

码途钥匙

2025-03-14

效果图

1.整体代码

这段代码综合运用 HTML、CSS 和 JavaScript，实现了 “激光汇聚成爱心” 的网页动画效果。HTML 搭建基本结构，创建用于绘制动画的

2.HTML 部分

HTML 部分设定了网页的基本结构，声明了文档类型，指定了页面语言为中文，设置了标题，通过<style>标签为<canvas>元素定义样式，使其占据整个页面且背景为半透明黑色，并在页面主体中创建了一个<canvas>元素用于绘制动画。

3.CSS 部分

CSS 部分仅有对<canvas>元素的样式设置，包括绝对定位、尺寸和背景颜色。

4.JavaScript 部分

JavaScript 部分首先进行了requestAnimationFrame方法的兼容性处理，确保在不同浏览器中都能实现高效的动画刷新。接着检测设备类型，判断是否为移动设备

初始化函数init用于设置动画的初始参数，根据设备类型调整画布大小，获取画布及其 2D 绘图上下文，用黑色填充画布。

定义了两个函数，heartPosition用于计算爱心上某点的坐标，scaleAndTranslate用于对坐标进行缩放和平移。同时，为窗口的resize事件添加了监听器，以便在窗口大小变化时重新设置画布尺寸并填充黑色。

通过一系列循环计算并存储爱心的点坐标，设定每个动画元素的属性，如速度、颜色、目标点索引等，还定义了动画的配置参数。

动画循环函数loop不断更新时间，根据时间计算目标点，填充画布背景，对每个动画元素计算其与目标点的距离，根据距离调整元素的速度和位置，绘制元素的轨迹，从而实现激光汇聚成爱心的动态效果。最后，根据页面加载状态，在页面加载完成后调用初始化函数启动动画。

5.代码

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>激光汇聚成爱心</title>    <style>      canvas {        position: absolute;        left: 0;        top: 0;        width: 100%;        height: 100%;        background-color: rgba(0, 0, 0, 0.2);      }</style>  </head>  <body>    <canvas id="heart"></canvas>    <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 ? 1.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.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 = 50;        var pointsOrigin = [];        var i;        var dr = 0.1;        for (i = 0; i < Math.PI * 2; i += dr)          pointsOrigin.push(            scaleAndTranslate(heartPosition(i), 105, 6.5, 0, 0)          ); // 修改比例参数        for (i = 0; i < Math.PI * 2; i += dr)          pointsOrigin.push(scaleAndTranslate(heartPosition(i), 75, 4.5, 0, 0)); // 修改比例参数        for (i = 0; i < Math.PI * 2; i += dr)          pointsOrigin.push(scaleAndTranslate(heartPosition(i), 45, 2.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 () {          var n = -Math.cos(time);          pulse((1 + n) * 0.5, (1 + n) * 0.5);          time +=            (Math.sin(time) < 0 ? 9 : n > 0.8 ? 0.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);            }          }
          window.requestAnimationFrame(loop, canvas);        };        loop();      };
      var s = document.readyState;      if (s === 'complete' || s === 'loaded' || s === 'interactive') init();      else document.addEventListener('DOMContentLoaded', init, false);</script>  </body></html>