通过粒子绘制文字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
  </style>
  <script>
    let ctx
    const COLOR = "#000";
    const FONT_SIZE = 15
    const points = []
    const PARTICLES_SIZE = 2 // 粒子大小
    let canvas

    function Point(x, y, r, g, b, a) {
      const TEXT_CONTENT = canvas.textContent; // canvas里面文字的内容
      const text_width = ctx.measureText(TEXT_CONTENT).width
      this.x = x * 4
      this.y = y * 4
      this.r = r
      this.g = g
      this.b = b
      this.a = a

      this.getX = function () {
        return this.x;
      }

      this.getY = function () {
        return this.y;
      }
    }

    const adjustText = () => {

      const TEXT_CONTENT = canvas.textContent; // canvas里面文字的内容

      ctx.fillStyle = COLOR;
      ctx.textAlign = "center"
      ctx.font = `${FONT_SIZE}px serif`
      ctx.fillText(TEXT_CONTENT, canvas.width / 2, canvas.height / 2);
      const text_width = ctx.measureText(TEXT_CONTENT).width
      const image_data = ctx.getImageData(canvas.width / 2 - text_width / 2, canvas.height / 2 - FONT_SIZE, text_width, FONT_SIZE);
      // 遍历当前canvas的宽和高,然后每个需要粒子的坐标记录下来
      for (let index in image_data.data) {
        /*
        遍历data里面的数据,找出不是0的坐标系,
        0  1  2  3
        4  5  6  7
        8  9  10 11

        y轴  x轴  对应的值
        0    0    0
        0    0    1
        0    0    2
        0    0    3
        1    0    4
        1    0    5
        1    0    6

        公式为:y轴*x轴的长度 + x轴,就是我们对应的

         现在我们知道了他所在的下标,和x轴的宽度,所以现在X和Y轴的公式为
         0  1  2  3  4
         5  6  7  8  9

         下标   x轴的长度    对应的值轴   x轴
          0      5          0           0
          0      5          1           0
          0      5          2           0
          0      5          3           0
          0      5          4           0
          1      5          5           1
          1      5          6           1
          1      5          7           1
          1      5          8           1
         现在获取9对应的x轴和y轴
         x轴坐标的公式为
            下标 % X轴的长度
         y轴坐标的公式为
            (下标 - x) / x轴的长度
         */
        if (image_data.data[index] !== 0) {
          // 这里除以四是因为image.data里面的值放的是rgba,每四位数代表一个坐标
          const num = Math.floor(index / 4);
          const x = num % image_data.width;
          const y = Math.floor((num - x) / image_data.width)
          points.push(new Point(x, y, image_data.data[index], image_data.data[index + 1], image_data.data[index + 2], image_data.data[index + 2]))
        }
      }
    }
    window.onload = () => {
      canvas = document.getElementById("particle");
      ctx = canvas.getContext('2d', {alpha: true,});
      init()
    }
    const draw = () => {
      /*
       清除画布上的东西,
       开始遍历之前放置的粒子,然后绘制粒子,最后填充颜色
       */
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      let point;

      for (let i = 0; i < points.length; i++) {
        point = points[i];
        ctx.fillStyle = "rgba(" + point.r + "," + point.g + "," + point.b + "," + point.a + ")";
        ctx.beginPath();
        ctx.arc(point.getX(), point.getY(), PARTICLES_SIZE, 0, 2 * Math.PI, true);
        ctx.fill();
      }
    }
    const init = () => {
      // resizeCanvas()
      adjustText()
      draw()
    }

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight - 4;
    }
  </script>
</head>
<body>
<!-- 绘制canvas -->
<canvas id="particle" width="400" height="500">hello world</canvas>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用CSS3的animation属性来实现粒子文字特效。具体实现步骤如下: 1. 创建一个包含文字HTML元素,例如一个div。 2. 使用CSS设置该元素的样式,包括文字颜色、字体大小等。 3. 使用CSS设置该元素的position属性为relative,以便后续设置粒子的位置。 4. 使用JavaScript创建多个粒子元素,例如使用canvas绘制圆形粒子,并将它们添加到HTML中。 5. 使用CSS设置粒子元素的position属性为absolute,并设置其初始位置。 6. 使用CSS3的animation属性为每个粒子元素设置动画效果,例如随机移动、逐渐消失等。 7. 将所有粒子元素添加到文字元素中,以便它们跟随文字一起移动。 以下是一个简单的示例代码: HTML: <div class="text">Hello World</div> <canvas id="particles"></canvas> CSS: .text { color: #fff; font-size: 100px; position: relative; } #particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } JS: // 创建粒子 function createParticle(x, y) { var particle = document.createElement('div'); particle.className = 'particle'; particle.style.left = x + 'px'; particle.style.top = y + 'px'; document.getElementById('particles').appendChild(particle); } // 随机生成粒子 for (var i = 0; i < 100; i++) { var x = Math.random() * window.innerWidth; var y = Math.random() * window.innerHeight; createParticle(x, y); } CSS: .particle { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; animation: move 2s ease-in-out infinite; } @keyframes move { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(50px, -50px); opacity: 0; } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值