还在用canvas画格子吗？文字烟花效果更不错噢

时间：2022-02-13 15:22:04

大家好，我是小丞同学，一名前端爱好者

欢迎访问博主的个人网站：一口奶盖

“在人间贩卖声音 等凑够满天星辰 放烟花给你看”

还在用canvas画格子吗？文字烟花效果更不错噢

上次的烟花有些许平淡，这次来放大招了，让你的名字在天空绽放！

喜欢的话可以私信源码去晒狗粮噢~

全程高能，无尿点，有部分内容在上期的文章中噢~

实现效果

还在用canvas画格子吗？文字烟花效果更不错噢

你以为仅此而已吗，后面还有大招噢

实现过程

1. 在画布上绘制文字

通过ctx.font设定字体的大小以及字体，再填充颜色，最后通过ctx.fillText绘制到画布当中，这里有几个需要注意的地方：

注意：

  1. ctx.font至少需要两个参数，一个字体大小，一个字体
  2. 这里的颜色之所以设为#000001原因是背景是黑色的，这样这个字不会被看到，但是它是真实存在的，不然每次点击时都会有一个字体生成在左上角，影响视觉，当然也可以新建在一个画布，这里就简单处理了
  3. ctx.measureText(text)：返回一个对象，该对象包含以像素计的指定字体宽度。
// 填充字体样式

let font = 120

ctx.font = font + "px '微软雅黑'"

ctx.fillStyle = "#000001"

// 内容

let text = '小丞同学'

// 获取字体的宽度

let textWidth = ctx.measureText(text).width

// 在左上角填充字体

ctx.fillText(text,0 , font)

2. 获取像素点

通过ctx.getImageData可以获取一个区域内的像素数据，返回的是一个imageData对象

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

  • R - 红色 (0-255)
  • G - 绿色 (0-255)
  • B - 蓝色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

在前面的代码中我们在 (0,0) 的位置绘制了字体，我们通过getImageData将这块区域的像素信息取出来。

let imgData = ctx.getImageData(0, 0, textWidth, font * 1.2)

我们先看看imgData，可以看到里面的数据十分庞大，里面存储的是像素信息

还在用canvas画格子吗？文字烟花效果更不错噢

这样我们可以通过判断这些像素点来实现粒子的效果

3. 实现文字粒子化

在上面一步中我们已经将文字的像素信息得到了，也就相当于我们复制了一个文字，我们可以遍历整个imgData.data数组就能绘制出原先的文字，那我们要实现粒子化的效果，就需要隔几个像素格再绘制，这样绘制处理的图形就会是一个粒子化的效果，原因就是部分位置的像素，没有进行渲染

for (let h = 0; h < font * 1.2; h += 6) {

    for (let w = 0; w < textWidth; w += 6) {

        let position = (textWidth * h + w) * 4;

        // 返回的数组是rgba的方式存储

        let r = imgData.data[position],

            g = imgData.data[position + 1],

            b = imgData.data[position + 2],

            a = imgData.data[position + 3];

        if (r + g + b == 0) {

            continue

        }

        //烟花代码

    }

}

在上面的代码块中，遍历了从左到右，从上到下，遍历了整个图形区域的全部像素信息，r,g,b,a对应一个某个像素点的颜色，当颜色不为黑色时，我们不对它进行操作，跳过此轮循环，当颜色不为黑色时，利用该点的信息生成一个烟花粒子

还在用canvas画格子吗？文字烟花效果更不错噢

let firework = {};

firework.x = x;

firework.y = y;

firework.fx = x + w - textWidth / 2;

firework.fy = y + h - font / 2;

firework.size = Math.floor(Math.random() * 2) + 1;

firework.speed = 1;

setColors(firework);

fireworks.push(firework);

烟花粒子对象存入烟花数组中

4. 设置粒子动画

现在我们已经得到了一整个即将绽放的烟花数组，我们只需要给他们加上动画，通过每次渲染时改变当前粒子的坐标，降低透明度实现烟花殆尽的效果，直至烟花粒子透明度降为0

关键代码

firework.x += (firework.fx - firework.x) / 10;

firework.y += (firework.fy - firework.y) / 10 - (firework.alpha - 1) * firework.speed;

firework.alpha -= 0.01;

// 如果透明度小于0就删除这个粒子

if (firework.alpha <= 0) {

    fireworks.splice(i, 1);

    // 跳过这次循环，不进行绘制

    continue;

}

5. 设置拖尾并渲染更新画布

拖尾实现的思路是不断的添加一个半透明的蒙层来实现，使用 requestAnimationFrame于定时器的区别在上篇文章有讲过噢

function tick() {

    // // 设置拖影

    ctx.globalCompositeOperation = 'destination-out';

    ctx.fillStyle = 'rgba(0,0,0,' + 10 / 100 + ')';

    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.globalCompositeOperation = 'lighter';

    // 更新画布

    drawFires();

    requestAnimationFrame(tick);

}

总结

今天的烟花就到这里反映结束了，不过瘾的话，可以让我们一起期待下一篇图片烟花效果噢~摩尔庄园的烟花也很好看噢！

还在用canvas画格子吗？文字烟花效果更不错噢

相关文章