devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript---动态爱心代码_html粒子爱心代码

作者：代码探险家 | 2024-07-02 06:56:35

赞

踩

html粒子爱心代码

效果展示：

 

源码如下：

可更改背景图、背景色以及爱心颜色。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>动态爱心代码</title>
  9.     <style>
  10.         html,
  11.         body {
  12.             height: 100%;
  13.             padding: 0;
  14.             margin: 0;
  15.             /* 背景颜色 */
  16.             background: #000;
  17.             /* 此处可调节背景颜色及背景图 */
  18.             background-image: url(bg.gif);
  19.             /* 背景图片垂直、水平均居中 */
  20.             background-position: center center;
  21.             /* 背景图片不平铺 */
  22.             background-repeat: no-repeat;
  23.             /* 当内容高度>图片高度时，背景图像的位置相对于电脑窗口固定 */
  24.             background-attachment: fixed;
  25.             /* 让背景图片基于窗口大小伸缩 */
  26.             background-size: cover;
  27.  
  28.  
  29.         }
  30.  
  31.         canvas {
  32.             position: absolute;
  33.             /* 此处可更改爱心位置 */
  34.             width: 100%;
  35.             height: 100%;
  36.             /* width: 500px;
  37.             height: 500px; */
  38.  
  39.         }
  40.     </style>
  41. </head>
  42.  
  43. <body>
  44.     <canvas id="pinkboard"></canvas>
  45.     <script>
  46.         //  设置粒子
  47.         var settings = {
  48.             particles: {
  49.                 length: 500, // 最大颗粒量
  50.                 duration: 2, // 粒子持续时间（秒）
  51.                 velocity: 100, // 粒子速度（以像素/秒为单位）
  52.                 effect: -0.65, // 影响粒子的扩散
  53.                 size: 30, // 粒径（像素）
  54.             },
  55.         };
  56.  
  57.         (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());
  58.         //    点类
  59.         var Point = (function () {
  60.             function Point(x, y) {
  61.                 this.x = (typeof x !== 'undefined') ? x : 0;
  62.                 this.y = (typeof y !== 'undefined') ? y : 0;
  63.             }
  64.             Point.prototype.clone = function () {
  65.                 return new Point(this.x, this.y);
  66.             };
  67.             Point.prototype.length = function (length) {
  68.                 if (typeof length == 'undefined')
  69.                     return Math.sqrt(this.x * this.x + this.y * this.y);
  70.                 this.normalize();
  71.                 this.x *= length;
  72.                 this.y *= length;
  73.                 return this;
  74.             };
  75.             Point.prototype.normalize = function () {
  76.                 var length = this.length();
  77.                 this.x /= length;
  78.                 this.y /= length;
  79.                 return this;
  80.             };
  81.             return Point;
  82.         })();
  83.         //粒子类
  84.         var Particle = (function () {
  85.             function Particle() {
  86.                 this.position = new Point();
  87.                 this.velocity = new Point();
  88.                 this.acceleration = new Point();
  89.                 this.age = 0;
  90.             }
  91.             Particle.prototype.initialize = function (x, y, dx, dy) {
  92.                 this.position.x = x;
  93.                 this.position.y = y;
  94.                 this.velocity.x = dx;
  95.                 this.velocity.y = dy;
  96.                 this.acceleration.x = dx * settings.particles.effect;
  97.                 this.acceleration.y = dy * settings.particles.effect;
  98.                 this.age = 0;
  99.             };
  100.             Particle.prototype.update = function (deltaTime) {
  101.                 this.position.x += this.velocity.x * deltaTime;
  102.                 this.position.y += this.velocity.y * deltaTime;
  103.                 this.velocity.x += this.acceleration.x * deltaTime;
  104.                 this.velocity.y += this.acceleration.y * deltaTime;
  105.                 this.age += deltaTime;
  106.             };
  107.             Particle.prototype.draw = function (context, image) {
  108.                 function ease(t) {
  109.                     return (--t) * t * t + 1;
  110.                 }
  111.                 var size = image.width * ease(this.age / settings.particles.duration);
  112.                 context.globalAlpha = 1 - this.age / settings.particles.duration;
  113.                 context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
  114.             };
  115.             return Particle;
  116.         })();
  117.         //粒子池类
  118.         var ParticlePool = (function () {
  119.             var particles,
  120.                 firstActive = 0,
  121.                 firstFree = 0,
  122.                 duration = settings.particles.duration;
  123.             function ParticlePool(length) {
  124.                 // 创建并填充粒子池
  125.                 particles = new Array(length);
  126.                 for (var i = 0; i < particles.length; i++)
  127.                     particles[i] = new Particle();
  128.             }
  129.             ParticlePool.prototype.add = function (x, y, dx, dy) {
  130.                 particles[firstFree].initialize(x, y, dx, dy);
  131.                 // 处理循环队列
  132.                 firstFree++;
  133.                 if (firstFree == particles.length) firstFree = 0;
  134.                 if (firstActive == firstFree) firstActive++;
  135.                 if (firstActive == particles.length) firstActive = 0;
  136.             };
  137.             ParticlePool.prototype.update = function (deltaTime) {
  138.                 var i;
  139.                 // 更新活性粒子
  140.                 if (firstActive < firstFree) {
  141.                     for (i = firstActive; i < firstFree; i++)
  142.                         particles[i].update(deltaTime);
  143.                 }
  144.                 if (firstFree < firstActive) {
  145.                     for (i = firstActive; i < particles.length; i++)
  146.                         particles[i].update(deltaTime);
  147.                     for (i = 0; i < firstFree; i++)
  148.                         particles[i].update(deltaTime);
  149.                 }
  150.                 // 去除非活性颗粒
  151.                 while (particles[firstActive].age >= duration && firstActive != firstFree) {
  152.                     firstActive++;
  153.                     if (firstActive == particles.length) firstActive = 0;
  154.                 }
  155.             };
  156.             ParticlePool.prototype.draw = function (context, image) {
  157.                 // 绘制活性粒子
  158.                 if (firstActive < firstFree) {
  159.                     for (i = firstActive; i < firstFree; i++)
  160.                         particles[i].draw(context, image);
  161.                 }
  162.                 if (firstFree < firstActive) {
  163.                     for (i = firstActive; i < particles.length; i++)
  164.                         particles[i].draw(context, image);
  165.                     for (i = 0; i < firstFree; i++)
  166.                         particles[i].draw(context, image);
  167.                 }
  168.             };
  169.             return ParticlePool;
  170.         })();
  171.  
  172.         // 将粒子整合在一起
  173.  
  174.         (function (canvas) {
  175.             var context = canvas.getContext('2d'),
  176.                 particles = new ParticlePool(settings.particles.length),
  177.                 particleRate = settings.particles.length / settings.particles.duration, // particles/sec
  178.                 time;
  179.             // 得到心形点 -PI <= t <= PI
  180.             function pointOnHeart(t) {
  181.                 return new Point(
  182.                     160 * Math.pow(Math.sin(t), 3),
  183.                     130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
  184.                 );
  185.             }
  186.             // 使用虚拟画布创建粒子图像
  187.             var image = (function () {
  188.                 var canvas = document.createElement('canvas'),
  189.                     context = canvas.getContext('2d');
  190.                 canvas.width = settings.particles.size;
  191.                 canvas.height = settings.particles.size;
  192.                 // 用于创建路径的帮助程序函数
  193.                 function to(t) {
  194.                     var point = pointOnHeart(t);
  195.                     point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
  196.                     point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
  197.                     return point;
  198.                 }
  199.                 // 创建路径
  200.                 context.beginPath();
  201.                 var t = -Math.PI;
  202.                 var point = to(t);
  203.                 context.moveTo(point.x, point.y);
  204.                 while (t < Math.PI) {
  205.                     t += 0.01; // baby steps!
  206.                     point = to(t);
  207.                     context.lineTo(point.x, point.y);
  208.                 }
  209.                 context.closePath();
  210.                 // 创建填充
  211.                 context.fillStyle = '#ff8585';//爱心颜色
  212.                 context.fill();
  213.                 // 创建图像
  214.                 var image = new Image();
  215.                 image.src = canvas.toDataURL();
  216.                 return image;
  217.             })();
  218.             // 渲染
  219.             function render() {
  220.                 // 下一个动画帧
  221.                 requestAnimationFrame(render);
  222.                 //更新时间
  223.                 var newTime = new Date().getTime() / 1000,
  224.                     deltaTime = newTime - (time || newTime);
  225.                 time = newTime;
  226.                 // 透明画布
  227.                 context.clearRect(0, 0, canvas.width, canvas.height);
  228.                 // 创建新粒子
  229.                 var amount = particleRate * deltaTime;
  230.                 for (var i = 0; i < amount; i++) {
  231.                     var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
  232.                     var dir = pos.clone().length(settings.particles.velocity);
  233.                     particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
  234.                 }
  235.                 // 更新和绘制粒子
  236.                 particles.update(deltaTime);
  237.                 particles.draw(context, image);
  238.             }
  239.             // 处理（重新）调整画布的大小
  240.             function onResize() {
  241.                 canvas.width = canvas.clientWidth;
  242.                 canvas.height = canvas.clientHeight;
  243.             }
  244.             window.onresize = onResize;
  245.             // 延迟渲染引导
  246.             setTimeout(function () {
  247.                 onResize();
  248.                 render();
  249.             }, 10);
  250.         })(document.getElementById('pinkboard'));</script>
  251. </body>
  252.  
  253. </html>

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号