爱心动画代码HTML5

于 2024-08-19 16:56:14 发布
阅读量160 收藏 2
点赞数 9
分类专栏： 前端开发 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64146991/article/details/141325153
版权

这段代码是一个HTML5 Canvas动画，它通过JavaScript创建了一个动态的爱心效果。页面初始化时，首先定义了一些基本设置，如粒子数量、持续时间、速度等。然后，定义了Point和Particle类，用于处理粒子的位置和运动。接着，使用ParticlePool管理粒子池，实现粒子的循环利用。

核心动画逻辑在`render`函数中，这个函数会在每一帧调用`requestAnimationFrame`来更新和渲染粒子。动画效果通过在Canvas上绘制粒子来实现，粒子从爱心形状的路径上发射出来，随着时间逐渐消失，形成了一个连续的动态效果。

此外，还有一个`pointOnHeart`函数用于生成爱心形状的路径点，以及一个辅助函数用于创建粒子图像。整个动画在全屏黑色背景上运行。

整体来看，这段代码展示了如何使用HTML5 Canvas和JavaScript来创建复杂的动画效果，适合用于网页装饰或特殊场合的视觉效果展示。

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        height: 100%;
        padding: 0;
        margin: 0;
        background: #000;
    }

    canvas {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .aa {
        position: fixed;
        /* 固定位置 */
        left: 50%;
        /* 向左移动自身宽度的50% */
        transform: translateX(-50%);
        /* 向左移动自身宽度的50%，实现水平居中 */
        top: 45%;

        color: #ccc;
        /* 文字颜色设置为灰色 */
        font-family: Arial, sans-serif;
        /* 设置字体 */
        font-size: 30px;
        /* 设置字体大小 */
    }
</style>

<body>
    <canvas id="pinkboard"></canvas>
    <div class="aa">美羊羊</div> <!-- 名字 -->
    <script>

        /*
         * 设置动画参数
         */
        var settings = {
            particles: {
                length: 500, // 粒子的最大数量
                duration: 2, // 粒子存在的时间（秒）
                velocity: 100, // 粒子的速度（像素/秒）
                effect: -0.75, // 控制粒子运动效果的参数
                size: 30 // 粒子的大小（像素）
            },
        };

        /*
         * RequestAnimationFrame polyfill by Erik M?ller
         */
        (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) } } }());

        /*
         * 点(Point)类，用于处理二维空间中的点
         */
        var Point = (function () {
            function Point(x, y) {
                this.x = (typeof x !== 'undefined') ? x : 0;
                this.y = (typeof y !== 'undefined') ? y : 0;
            }
            Point.prototype.clone = function () {
                return new Point(this.x, this.y);
            };
            Point.prototype.length = function (length) {
                if (typeof length == 'undefined')
                    return Math.sqrt(this.x * this.x + this.y * this.y);
                this.normalize();
                this.x *= length;
                this.y *= length;
                return this;
            };
            Point.prototype.normalize = function () {
                var length = this.length();
                this.x /= length;
                this.y /= length;
                return this;
            };
            return Point;
        })();

        /*
         * 粒子(Particle)类，用于创建和管理动画中的粒子
         */
        var Particle = (function () {
            function Particle() {
                this.position = new Point();
                this.velocity = new Point();
                this.acceleration = new Point();
                this.age = 0;
            }
            Particle.prototype.initialize = function (x, y, dx, dy) {
                this.position.x = x;
                this.position.y = y;
                this.velocity.x = dx;
                this.velocity.y = dy;
                this.acceleration.x = dx * settings.particles.effect;
                this.acceleration.y = dy * settings.particles.effect;
                this.age = 0;
            };
            Particle.prototype.update = function (deltaTime) {
                this.position.x += this.velocity.x * deltaTime;
                this.position.y += this.velocity.y * deltaTime;
                this.velocity.x += this.acceleration.x * deltaTime;
                this.velocity.y += this.acceleration.y * deltaTime;
                this.age += deltaTime;
            };
            Particle.prototype.draw = function (context, image) {
                function ease(t) {
                    return (--t) * t * t + 1;
                }
                var size = image.width * ease(this.age / settings.particles.duration);
                context.globalAlpha = 1 - this.age / settings.particles.duration;
                context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
            };
            return Particle;
        })();

        /*
         * 粒子池(ParticlePool)类，用于高效管理大量粒子
         */
        var ParticlePool = (function () {
            var particles,
                firstActive = 0,
                firstFree = 0,
                duration = settings.particles.duration;

            function ParticlePool(length) {
                // create and populate particle pool
                particles = new Array(length);
                for (var i = 0; i < particles.length; i++)
                    particles[i] = new Particle();
            }
            ParticlePool.prototype.add = function (x, y, dx, dy) {
                particles[firstFree].initialize(x, y, dx, dy);

                // handle circular queue
                firstFree++;
                if (firstFree == particles.length) firstFree = 0;
                if (firstActive == firstFree) firstActive++;
                if (firstActive == particles.length) firstActive = 0;
            };
            ParticlePool.prototype.update = 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 < particles.length; 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 == particles.length) firstActive = 0;
                }


            };
            ParticlePool.prototype.draw = 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 < particles.length; i++)
                        particles[i].draw(context, image);
                    for (i = 0; i < firstFree; i++)
                        particles[i].draw(context, image);
                }
            };
            return ParticlePool;
        })();

        /*
         * 动画的主要逻辑
         */
        (function (canvas) {
            var context = canvas.getContext('2d'),
                particles = new ParticlePool(settings.particles.length),
                particleRate = settings.particles.length / settings.particles.duration, // particles/sec
                time;

            // 根据给定的参数t，计算爱心形状上的点
            function pointOnHeart(t) {
                return new Point(
                    160 * Math.pow(Math.sin(t), 3),
                    130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
                );
            }

            // 创建粒子图像，用于在动画中显示
            var image = (function () {
                var canvas = document.createElement('canvas'),
                    context = canvas.getContext('2d');
                canvas.width = settings.particles.size;
                canvas.height = settings.particles.size;
                // helper function to create the path
                function to(t) {
                    var point = pointOnHeart(t);
                    point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
                    point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
                    return point;
                }
                // create the path
                context.beginPath();
                var t = -Math.PI;
                var point = to(t);
                context.moveTo(point.x, point.y);
                while (t < Math.PI) {
                    t += 0.01; // baby steps!
                    point = to(t);
                    context.lineTo(point.x, point.y);
                }
                context.closePath();
                // create the fill
                context.fillStyle = '#ea80b0';
                context.fill();
                // create the image
                var image = new Image();
                image.src = canvas.toDataURL();
                return image;
            })();

            // 渲染函数，用于每一帧的动画绘制
            function render() {
                // next animation frame
                requestAnimationFrame(render);

                // update time
                var newTime = new Date().getTime() / 1000,
                    deltaTime = newTime - (time || newTime);
                time = newTime;

                // clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

                // create new particles
                var amount = particleRate * deltaTime;
                for (var i = 0; i < amount; i++) {
                    var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
                    var dir = pos.clone().length(settings.particles.velocity);
                    particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
                }

                // update and draw particles
                particles.update(deltaTime);
                particles.draw(context, image);
            }

            // 处理Canvas大小变化的函数
            function onResize() {
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;
            }
            window.onresize = onResize;

            // 延迟启动渲染，确保页面元素加载完毕
            setTimeout(function () {
                onResize();
                render();
            }, 10);
        })(document.getElementById('pinkboard'));
    </script>
</body>

</html>

效果图： 

冬天的枫树
关注
  • 9
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html5 canvas线条合成的爱心动画特效
weixin_52354260的博客
11-13 325
html5 canvas线条合成的爱心动画特效
jquery+html5烂漫爱心表白动画代码分享
10-23
【jQuery + HTML5浪漫爱心表白动画】是一种利用JavaScript库jQuery和HTML5的Canvas元素创建的互动动画效果，常用于制作富有创意的表白场景。在HTML5的Canvas上，可以通过JavaScript绘制图形并添加动画效果，使得爱心...
520表白html5爱心代码
youyouxiong的博客
05-20 8361
在HTML5中创建一个带有爱心动画的表白页面，可以通过结合CSS3动画和JavaScript来实现。这个示例创建了一个简单的表白页面，其中包含一个动态的爱心和文字。你可以根据自己的需求调整样式和动画效果，以创建一个更加个性化的表白页面。的动画，它会使爱心按照一定的时间间隔进行缩放，产生跳动的效果。类定义了表白文字的样式，包括它的位置、颜色和字体大小。类定义了爱心的样式，包括它的形状和大小。伪元素用于创建爱心的两个部分，并使用。在这个示例中，我们使用了CSS3的。属性来旋转它们，形成爱心的形状。
HTML5 Canvas爱心表白动画特效
CreatorRay的博客
08-22 1万+
代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。
2022跨年烟花代码（九）HTML5夜景放烟花绽放动画效果
热门推荐
u013343616的博客
12-30 11万+
HTML5夜景放烟花绽放动画效果 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Cont
HTML5线条照射爱心动画特效特效代码
03-20
这款"HTML5线条照射爱心动画特效特效代码"就是利用HTML5的核心技术之一——Canvas，来实现一个创新且引人注目的动画效果。 Canvas是HTML5中的一个图形绘制元素，允许开发者通过JavaScript来动态绘制2D图形。在这个...
HTML5爱心动画源码
12-18
在"HTML5爱心动画源码"这个项目中，我们可以深入探讨HTML5如何实现动态效果，特别是与爱心相关的动画。 首先，爱心动画的实现通常涉及到SVG（Scalable Vector Graphics）元素，这是一种基于XML的矢量图形格式，支持...
HTML5表白神器爱心动画特效
06-24
分析这个文件，我们可以学习到如何利用HTML5的特性来编写动画代码，包括事件处理、时间函数的运用、图形渲染等技巧。 总结起来，"HTML5表白神器爱心动画特效"利用HTML5的Canvas、Web Animation API和可能的Web ...
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 368
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 344
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1000
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1152
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
weixin_42348009的博客
08-14 185
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 982
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 584
NVDLA专题4：具体模块介绍——Convolution DMA
一些有趣的XSS注入GAME
qq_67758645的博客
08-17 799
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
Bootstrap 附加导航（Affix）插件
2402_83140078的博客
08-17 596
附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。
Javascript嵌套函数的调用
Cc040909的博客
08-17 422
闭包的嵌套函数就不同了，由于有两个函数，调用栈就标记为1， 表示内部还有函数，这个函数不知道什么时候才执行，所以js引擎就把他保存在内存中了。恰好第一个函数和第二个函数执行的时候，眼睛观察到的调用是看不到对象，所以执行的是默认绑定，都默认绑定在全局对象window上(浏览器环境)。上面这个总结的过程非常微妙，细节就在于嵌套的函数的分部执行过程，尽管内部函数嵌套在外部函数内，但是外部函数并没有影响内部函数的权利，内部函数的执行是不受外部函数控制的。外部函数和内部函数是两个不同的事件循环位置，独立调用的，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冬天的枫树

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值