HTML5+原生JS和Canvas实现粒子动态小人比心网页

于 2025-02-20 08:47:40 发布
阅读量537 收藏 5
点赞数 7
文章标签： html5 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53928741/article/details/145744093
版权

 简介

这是一个基于原生Web技术打造的创意交互动画，通过HTML5，Canvas和JavaScript实现了一个粒子化背景动态小人比心动画。项目将传统动画与粒子系统相结合，展现了Web前端技术的强大表现力，无需任何第三方框架即可实现流畅的视觉效果和用户交互。

 介绍

该网页代码精简（<5KB），现博主已经出社会工作了便没有闲暇时间去完善该网页，如果遇到需要修改的模块可自行优化。话不多说，直接上代码。

效果图 

 

HTML和CSS代码

首先，我们需要一个canvas元素和一个div元素；canvas用于在其中绘制烟花，这个元素会铺满整个屏幕。div用于在屏幕中显示动态GIF（此处的表情包可设置为自己喜欢的）。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: white;
        }

        canvas {
            display: block;
        }

        .text-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 1;
        }

    </style>
</head>
<body>
    <div class="text-container">
        <!-- 此处可插入文字 -->
        <img src="img/biubiubiu.gif" ondragstart='return false;'>
    </div>
    <canvas id="canvas" style="z-index:1"></canvas>
    <!-- JavaScript代码将在这里插入 -->
</body>
</html>

js代码

我们需要通过js为canvas定义宽度和高度，定义Heart和particle两个动态类，并通过一些定义每次的函数去控制它们。

 1，Heart类

这是定义的一个心形坠落粒子类，每次进入该页面会生成30组粒子由上到下呈现坠落效果，且会重复生成。

//心形坠落粒子类
class Heart {
        constructor() {
            this.reset();
            this.size = Math.random() * 20 + 10;
            this.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
        }

        reset() {
            this.x = Math.random() * canvas.width;
            this.y = -50;
            this.speed = Math.random() * 2 + 1;
            this.angle = Math.random() * Math.PI * 2;
        }

        draw() {
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.bezierCurveTo(-10, -15, -25, -10, -5, -25);
            ctx.bezierCurveTo(15, -40, 25, -10, 0, 0);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.restore();
        }

        update() {
            this.y += this.speed;
            this.angle += 0.02;
            if (this.y > canvas.height + 50) this.reset();
        }
    }

    const hearts = Array(30).fill().map(() => new Heart());

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        hearts.forEach(heart => {
            heart.update();
            heart.draw();
        });
        particles.forEach((particle, index) => {
            particle.update();
            particle.draw();
            if (particle.alpha <= 0) {
                particles.splice(index, 1);
            }
        });

        requestAnimationFrame(animate);
    }

 2，particle类

 这是定义的点击爆炸烟花粒子类，进入网页后可点击鼠标生成爆炸烟花效果。

//爆炸烟花粒子类 
class Particle {
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.size = Math.random() * 5 + 2;
            this.speedX = Math.random() * 6 - 3;
            this.speedY = Math.random() * 6 - 3;
            this.color = `hsl(${Math.random() * 60 + 330}, 70%, 60%)`;
            this.alpha = 1;
        }

        update() {
            this.x += this.speedX;
            this.y += this.speedY;
            this.speedY += 0.1; // 重力效果
            this.alpha -= 0.02;
        }

        draw() {
            ctx.save();
            ctx.globalAlpha = this.alpha;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.restore();
        }
    }

    function createParticles(x, y) {
        for (let i = 0; i < 20; i++) {
            particles.push(new Particle(x, y));
        }
    }

    animate();

    canvas.addEventListener('click', (e) => {
        createParticles(e.clientX, e.clientY);
        hearts.forEach(heart => {
            const dx = e.clientX - heart.x;
            const dy = e.clientY - heart.y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            if (dist < 100) {
                heart.x += dx * 0.02;
                heart.y += dy * 0.02;
            }
        });
    });

项目完整代码 

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: white;
        }

        canvas {
            display: block;
        }

        .text-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 1;
        }

    </style>
</head>
<body>
    <div class="text-container">
        <!-- 此处可插入文字 -->
        <img src="img/biubiubiu.gif" ondragstart='return false;'>
    </div>
    <canvas id="canvas" style="z-index:1"></canvas>

    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var particles = [];

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        class Heart {
            constructor() {
                this.reset();
                this.size = Math.random() * 20 + 10;
                this.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
            }

            reset() {
                this.x = Math.random() * canvas.width;
                this.y = -50;
                this.speed = Math.random() * 2 + 1;
                this.angle = Math.random() * Math.PI * 2;
            }

            draw() {
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(this.angle);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.bezierCurveTo(-10, -15, -25, -10, -5, -25);
                ctx.bezierCurveTo(15, -40, 25, -10, 0, 0);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.restore();
            }

            update() {
                this.y += this.speed;
                this.angle += 0.02;
                if (this.y > canvas.height + 50) this.reset();
            }
        }

        var hearts = Array(30).fill().map(() => new Heart());

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            hearts.forEach(heart => {
                heart.update();
                heart.draw();
            });

            particles.forEach((particle, index) => {
                particle.update();
                particle.draw();
                if (particle.alpha <= 0) {
                   particles.splice(index, 1);
                }
            });

            requestAnimationFrame(animate);
        }

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 5 + 2;
                this.speedX = Math.random() * 6 - 3;
                this.speedY = Math.random() * 6 - 3;
                this.color = `hsl(${Math.random() * 60 + 330}, 70%, 60%)`;
                this.alpha = 1;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                this.speedY += 0.1; // 重力效果
                this.alpha -= 0.02;
            }

            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.restore();
            }
        }

        function createParticles(x, y) {
            for (let i = 0; i < 20; i++) {
                particles.push(new Particle(x, y));
            }
        }

        animate();

        canvas.addEventListener('click', (e) => {
            createParticles(e.clientX, e.clientY);
            hearts.forEach(heart => {
                var dx = e.clientX - heart.x;
                var dy = e.clientY - heart.y;
                var dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 100) {
                    heart.x += dx * 0.02;
                    heart.y += dy * 0.02;
                }
            });
        });

    </script>
</body>
</html>

总结

通过使用HTML5，Canvas和JavaScript，我们成功地创建了一个粒子动态小人比心网页。你可以根据自己的喜好调整粒子数量、速度和颜色等参数，创造出更多样化的效果。本文到此已结束，谢谢观看！

JS+HTML制作的跑步小人动画
09-06
一个比较简单的 JQuery + HTML 写的小人跑步动画！欢迎大家指点
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
10-18
主要介绍了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果,涉及javascript事件响应、数值运算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效教程
最新发布
VLOKL的博客
07-19 4574
❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效教程
css3实现奔跑的小人动画
车联网开发的博客
12-04 3080
定位  层级和动画的完美融合 效果图 有点吃藕了，图片不重要 &lt;!doctype html&gt; &lt;html&gt;&lt;!--根标签--&gt; &lt;head&gt; &lt;!--不可视区域--&gt; &lt;meta charset="UTF-8"&gt;&lt;!--国际编码--&gt; &lt;!--网页三要素--
如何直接在博客或前端html网页上添加L2D网页二次元可动小人 用L2Dwidget.js就可以了
极客小俊
09-02 5828
我的网页右下角有一个美女 动来动去的 还真可爱!!
html5实现的动画小人
08-23
html5实现的动画小人
html5 canvas小人跳舞动画特效
09-13
html5 canvas小人跳舞动画特效
随机数的生成
ljwznmsl的博客
07-15 146
对随机数的获取，有两种获取方式： int sui = (int) (Math.random() * 100); 生成0~100的随机数 另一种随机数生成方法： new Random().nextInt(int值); int值：表示生成随机数的范围 使用随机数生成随机码： public static void main(String[] args) { List<Objec...
html5动漫人物小部件制作,使用p5.js制作极简人物动画
weixin_29862397的博客
06-16 675
var Vector2=function(xValue,yValue){this.x=xValue;this.y=yValue;}var Vector3=function(xValue,yValue,zValue){this.x=xValue;this.y=yValue;this.z=zValue;}function Line(start,size){line(start.x,start.y,st...
原生canvas+js实现的粒子特效
09-11
纯JavaScript+canvas写的放射状圆点粒子特效，黑色背景。 摘要必须大于50个字! 摘要必须大于50个字! 摘要必须大于50个字!
HTML5跑动的小人源代码
03-18
其实游戏里的玩家动作也是这么实现的，就是把人物的动作放在一个精灵表(图片)里，然后逐帧绘制不同的动作，然后连起来就感觉人物在动了。可以用键盘左右键来控制小人移动。
floating_person:这是一个浮动在网页上的小人，支持菜单选择、拖动、隐藏、播放歌曲等功能,前端显示由HtmlCss控制，功能由JavascriptJquery实现
05-22
floating_person ####这是一个浮动在网页上的小人，支持菜单选择、拖动、隐藏、播放歌曲等功能,前端显示由Html/Css控制，功能由Javascript/Jquery实现 直接将html，css等文件拷贝到项目中，即可运行，依赖库JQuery以及browserDetect.js别忘了添进去 ##展示如下:
页面浮动小人插件
12-07
页面浮动小人插件，可以在操页面作上添加事件，小人给出提示
创意网页动态小人时钟
05-11
超逗的动态小人时钟，找了很久
Spig 网站浮动小人 (javascript)
06-17
采用 Javascript 开发的网站前端浮动小人，具体效果可以见：https://www.dreamwings.cn 小人支持右键秘密链接，支持自动根据时间问候（早上好、中午好之类），支持自动间隔一段时间展示 hihokito 精美句子。
使用原生JS+HTML5创建鼠标跟随粒子动画
"这篇文章展示了如何使用原生JavaScript和HTML5创建一个粒子动画效果，其中粒子会跟随鼠标在页面上移动。教程涵盖了JavaScript事件处理、数值计算以及动态改变页面元素属性等技术，适合对互动粒子效果感兴趣的开发者...
canvas文字粒子效果 html+css+js 3点饮茶，7点放工，美滋滋~
你好呀，很高兴你在看这里~
05-23 2044
先言：  今天3点多在饮茶的时候，发现有好几天没水文章了，但是太难的玩意又不会啊，咋办，突然想起电脑里还有存着一个文字粒子特效，好家伙，这不就来了，先看效果如下： 因为gif图最大5m，但是这东西演示完又不止5m，所以就用视频演示效果了~ BILINILI视频演示效果》 实现步骤（完整源码放在最后）： 1.获取画布 //获取画布 var canvas = docum
HTML5+CSS3+JavaScript 实现按键令小女孩移动，改变动画效果
qq_55786319的博客
09-08 2450
即键盘松开时，消除动画，停止定时器，并且要改变小女孩的朝向（positionY）。不然会出现按了向下走，松开键盘时，小女孩的朝向立马变成了向上。动画就是从一个样式过渡到另一个样式，这里从坐标上可以看出来，从一个黄色框过渡到第二个，但是这样只是从图一平移到图四，并不能实现想要的逐帧动画效果。给小女孩绑定键盘按下事件，再根据键码判断上下左右来改变小女孩的朝向。按上述操作小女孩只是原地踏步，现在要来实现小女孩按朝向前进。重复代码有很多，要优化代码，设置带参函数，暂时懒得想。要从（0，0）到（0，-384）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值