快七夕了，你告白了嘛？爱心代码（附源码）

2023-08-18 20:18:49 来源：哔哩哔哩

【资料图】

第一步：在电脑上新建一个.txt文档；

第二步：将以下代码复制后粘贴到新建的txt文档里，并保存；

<html><head> <meta charset="utf-8"> <title>loveHeart</title> <link rel="shortcut icon" href="/images/心.png" type="image/x-icon"> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } p{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); color: pink; animation: k ease-in-out infinite; } @keyframes k{ 100%{ font-size: 24px; opacity: 0; } } </style></head><body> <p>XXX我爱你</p> <canvas id="pinkboard"></canvas> <script> var settings = { particles: { length: 600, // 爱心的大小 duration: 2, // 爱心扩散速度，越小速度越快 velocity: 100, // 爱心扩散速度，越小速度越慢 effect: -, // 爱心收缩效果，比如：1扩散，-2收缩 size: 32, // 爱心数量 }, }; (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < && !; ++a) { = window[c[a] + "RequestAnimationFrame"]; = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!) { = function (h, e) { var d = new Date().getTime(); var f = (0, 16 - (d - b)); var g = (function () { h(d + f) }, f); b = d + f; return g } } if (!) { = function (d) { clearTimeout(d) } } }()); var Point = (function () { function Point(x, y) { = (typeof x !== 'undefined') ? x : 0; = (typeof y !== 'undefined') ? y : 0; } = function () { return new Point(, ); }; = function (length) { if (typeof length == 'undefined') return ( * + * ); (); *= length; *= length; return this; }; = function () { var length = (); /= length; /= length; return this; }; return Point; })(); var Particle = (function () { function Particle() { = new Point(); = new Point(); = new Point(); = 0; } = function (x, y, dx, dy) { = x; = y; = dx; = dy; = dx * ; = dy * ; = 0; }; = function (deltaTime) { += * deltaTime; += * deltaTime; += * deltaTime; += * deltaTime; += deltaTime; }; = function (context, image) { function ease(t) { return (--t) * t * t + 1; } var size = * ease( / ); = 1 - / ; (image, - size / 2, - size / 2, size, size); }; return Particle; })(); var ParticlePool = (function () { var particles, firstActive = 0, firstFree = 0, duration = ; function ParticlePool(length) { // create and populate particle pool particles = new Array(length); for (var i = 0; i < ; i++) particles[i] = new Particle(); } = function (x, y, dx, dy) { particles[firstFree].initialize(x, y, dx, dy); // handle circular queue firstFree++; if (firstFree == ) firstFree = 0; if (firstActive == firstFree) firstActive++; if (firstActive == ) firstActive = 0; }; = function (deltaTime) { var i; // update active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].update(deltaTime); } if (firstFree < firstActive) { for (i = firstActive; i < ; i++) particles[i].update(deltaTime); for (i = 0; i < firstFree; i++) particles[i].update(deltaTime); } // remove inactive particles while (particles[firstActive].age >= duration && firstActive != firstFree) { firstActive++; if (firstActive == ) firstActive = 0; } }; = function (context, image) { // draw active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image); } if (firstFree < firstActive) { for (i = firstActive; i < ; i++) particles[i].draw(context, image); for (i = 0; i < firstFree; i++) particles[i].draw(context, image); } }; return ParticlePool; })(); (function (canvas) { var context = ('2d'), particles = new ParticlePool(), particleRate = / , // particles/sec time; // get point on heart with -PI <= t <= PI function pointOnHeart(t) { return new Point( 160 * ((t), 3), 130 * (t) - 50 * (2 * t) - 20 * (3 * t) - 10 * (4 * t) + 25 ); } // creating the particle image using a dummy canvas var image = (function () { var canvas = ('canvas'), context = ('2d'); = ; = ; // helper function to create the path function to(t) { var point = pointOnHeart(t); = / 2 + * / 350; = / 2 - * / 350; return point; } // create the path (); var t = -; var point = to(t); (, ); while (t < ) { t += ; // baby steps! point = to(t); (, ); } (); // create the fill = '#ea80b0'; (); // create the image var image = new Image(); = (); return image; })(); // render that thing! function render() { // next animation frame requestAnimationFrame(render); // update time var newTime = new Date().getTime() / 1000, deltaTime = newTime - (time || newTime); time = newTime; // clear canvas (0, 0, , ); // create new particles var amount = particleRate * deltaTime; for (var i = 0; i < amount; i++) { var pos = pointOnHeart( - 2 * * ()); var dir = ().length(); ( / 2 + , / 2 - , , -); } // update and draw particles (deltaTime); (context, image); } // handle (re-)sizing of the canvas function onResize() { = ; = ; } = onResize; // delay rendering bootstrap setTimeout(function () { onResize(); render(); }, 10); })(('pinkboard')); </script></body> </html>

第三步：找到代码行“ ”修改名字并保存；

第四步：把.txt文件后缀改为.html，并确认保存。

运行文件，然后你就能得到独属于你的她/他的告白爱心啦~

标签：