CSS文本粒子动画特效之爱心粒子文字特效-Canvas

1. 效果图

2.完整代码

css 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    canvas {
      display: block;
    }
  </style>
  <title>文本粒子动画</title>
</head>

<body>
  <canvas id="textCanvas"></canvas>
  <script>
    const canvas = document.getElementById('textCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const particles = [];
    const fontSize = 100;
    const text = '果粒橙汁儿up好腻害'; // 这里更改粒子文案

    ctx.font = `${fontSize}px Arial`;
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    class Particle {
      constructor(x, y) {
        this.type = 'default'; // 定义粒子类型 分'image'和'default'
        this.x = x;
        this.y = y;
        if (this.type === 'image') {
          this.size = 10; // 调整粒子大小
        } else {
          this.size = 2; // 调整粒子大小
        }
        this.baseX = this.x;
        this.baseY = this.y;
        this.density = (Math.random() * 30) + 1;
        this.image = new Image();
        this.image.src = './heart.jpeg'; // 使用自定义的图像 路径写自己存放图片的途径和图片名字
      }

      draw() {
        if (this.type === 'image') {
          ctx.drawImage(this.image, this.x - this.size / 2, this.y - this.size / 2, this.size, this.size);
        } else {
          // 绘制其他类型的粒子
          ctx.fillStyle = 'black'; // 这里更改粒子颜色
          // ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}`; // 随机彩色粒子
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.closePath();
          ctx.fill();
        }
      }


      update() {
        let dx = mouse.x - this.x;
        let dy = mouse.y - this.y;
        let distance = Math.sqrt(dx * dx + dy * dy);
        let forceDirectionX = dx / distance;
        let forceDirectionY = dy / distance;
        let maxDistance = mouse.radius;
        let force = (maxDistance - distance) / maxDistance;
        let directionX = forceDirectionX * force * this.density;
        let directionY = forceDirectionY * force * this.density;

        if (distance < mouse.radius) {
          this.x -= directionX;
          this.y -= directionY;
        } else {
          if (this.x !== this.baseX) {
            let dx = this.x - this.baseX;
            this.x -= dx / 5;
          }
          if (this.y !== this.baseY) {
            let dy = this.y - this.baseY;
            this.y -= dy / 5;
          }
        }
      }
    }

    let mouse = {
      x: null,
      y: null,
      radius: 150
    };

    window.addEventListener('mousemove', function (event) {
      mouse.x = event.x;
      mouse.y = event.y;
    });

    function init() {
      for (let y = 0, y2 = imageData.height; y < y2; y += 4) {
        for (let x = 0, x2 = imageData.width; x < x2; x += 4) {
          if (imageData.data[(y * 4 * imageData.width) + (x * 4) + 3] > 128) {
            let positionX = x;
            let positionY = y;
            particles.push(new Particle(positionX, positionY));
          }
        }
      }
    }

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

      for (let i = 0; i < particles.length; i++) {
        particles[i].draw();
        particles[i].update();
      }
    }

    init();
    animate();
  </script>
</body>

</html>

代码出来的效果是黑色的,如果想要示例图那种爱心粒子,可以将type改成image,并且改变图片路径this.image.src,如果想要改变文案则改变text变量,如果要改变粒子颜色则改变ctx.fillStyle即可~

本案例使用的图片素材放在文章里啦,自取

相关推荐
逐·風1 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫31 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css