您现在的位置是：网站首页> 编程资料编程资料
Canvas 文本转粒子效果的实现代码详解Canvas 实现炫丽的粒子运动效果（粒子生成文字）
2023-10-16
447人已围观
简介 这篇文章主要介绍了Canvas 文本转粒子效果的实现代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了Canvas 文本转粒子效果的实现代码，分享给大家，希望对大家有所帮助，具体如下：
通过粒子来绘制文本让人感觉很有意思，配合粒子的运动更会让这个效果更加酷炫。本文介绍在 canvas 中通过粒子来绘制文本的方法。
实现原理
总的来说要做出将文本变成粒子展示的效果其实很简单，实现的原理就是使用两张 canvas，一张是用户看不到的 A canvas，用来绘制文本；另一张是用户看到的 B canvas，用来根据 A 的文本数据来生成粒子。直观表示如图：
创建离屏 canvas
HTML 只需要放置主 canvas 即可：
...
然后创建一个离屏 canvas，并绘制文本：
const WIDTH = window.innerWidth; const HEIGHT = window.innerHeight; const offscreenCanvas = document.createElement('canvas'); const offscreenCtx = offscreenCanvas.getContext('2d'); offscreenCanvas.width = WIDTH; offscreenCanvas.height = HEIGHT; offscreenCtx.font = '100px PingFang SC'; offscreenCtx.textAlign = 'center'; offscreenCtx.baseline = 'middle'; offscreenCtx.fillText('Hello', WIDTH / 2, HEIGHT / 2);这时页面上什么也没有发生，但实际上可以想象在离屏 canvas 上，此时应该如图所示：
核心方法 getImageData
使用 canvas 的 getImageData 方法，可以获取一个 ImageData 对象，这个对象用来描述 canvas 指定区域内的像素数据。也就是说，我们可以获取 “Hello” 这个文本每个像素点的位置和颜色，也就可以在指定位置生成粒子，最后形成的效果就是粒子拼凑成文本了。
要获取像素信息，需要使用 ImageData 对象的 data 属性，它将所有像素点的 rgba 值铺开成了一个数组，每个像素点有 rgba 四个值，这个数组的个数也就是 像素点数量 * 4。
假设我选取了一个 3 * 4 区域，那么一共 12 个像素点，每个像素点有 rgba 四个值，所以 data 这个数组就会有 12 * 4 = 48 个元素。
如果打印出 data，可以看到即从左往右，从上往下排列这些像素点的 rgba。
当然我们要获取的区域必须要包含文本，所以应该获取整个离屏 canvas 的区域：
const imgData = offscreenCtx.getImageData(0, 0, WIDTH, HEIGHT).data;
生成粒子
拿到 ImageData 后，通过遍历 data 数组，可以判断在离屏 canvas 的画布中，哪些点是有色彩的（处于文本中间），哪些点是没有色彩的（不在文本上），把那些有色彩的像素位置记下来，然后在主 canvas 上生成粒子，就 ok 了。
首先创建一下粒子类：
class Particle { constructor (options = {}) { const { x = 0, y = 0, color = '#fff', radius = 5} = options; this.radius = radius; this.x = x; this.y = y; this.color = color; } draw (ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); } }遍历 data，我们可以根据透明度，也就是 rgba 中的第四个元素是否不为 0 来判断该像素是否在文本中。
const particles = []; const skip = 4; for (var y = 0; y < HEIGHT; y += skip) { for (var x = 0; x < WIDTH; x += skip) { var opacityIndex = (x + y * WIDTH) * 4 + 3; if (imgData[opacityIndex] > 0) { particles.push(new Particle({ x, y, radius: 1, color: '#2EA9DF' })); } } }我们用 particles 数组来存放所有的粒子，这里的 skip 的作用是遍历的步长，如果我们一个像素一个像素地扫，那么最后拼凑文本的粒子将会非常密集，增大这个值，最后产生的粒子就会更稀疏。
最后在创建主 canvas 并绘制即可：
const canvas = document.querySelector('#stage'); canvas.width = WIDTH; canvas.height = HEIGHT; const ctx = canvas.getContext('2d'); for (const particle of particles) { particle.draw(ctx); }效果如下：
完整代码见01-basic-text-to-particles
添加效果
了解实现原理之后，其实其他的就都是给粒子添加一些动效了。首先可以让粒子有一些随机的位移，避免看上去过于整齐。
const particles = []; const skip = 4; for (var y = 0; y < HEIGHT; y += skip) { for (var x = 0; x < WIDTH; x += skip) { var opacityIndex = (x + y * WIDTH) * 4 + 3; if (imgData[opacityIndex] > 0) { // 创建粒子时加入随机位移 particles.push(new Particle({ x: x + Math.random() * 6 - 3, y: y + Math.random() * 6 - 3, radius: 1, color: '#2EA9DF' })); } } }效果如下：
如果想实现变大的效果，如：
这种要怎么实现呢，首先需要随机产生粒子的大小，这只需要在创建粒子时对 radius 进行 random 即可。另外如果要让粒子半径动态改变，那么需要区分开粒子的渲染半径和初始半径，并使用 requestAnimationFrame 进行动画渲染：
class Particle { constructor (options = {}) { const { x = 0, y = 0, color = '#fff', radius = 5} = options; this.radius = radius; // ... this.dynamicRadius = radius; // 添加 dynamicRadius 属性 } draw (ctx) { // ... ctx.arc(this.x, this.y, this.dynamicRadius, 0, 2 * Math.PI, false); // 替换为 dynamicRadius // ... } update () { // TODO } } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, WIDTH, HEIGHT); for (const particle of particles) { particle.update(); particle.draw(ctx); } });那么关键就在于粒子的 update 方法要如何实现了，假设我们想让粒子半径在 1 到 5 中平滑循环改变，很容易让人联想到三角函数，如：
横轴应该是与时间相关，可以再维护一个变量每次调用 update 的时候进行加操作，简单做也可以直接用时间戳来进行计算。update 方法示例如下：
update () { this.dynamicRadius = 3 + 2 * Math.sin(new Date() / 1000 % 1000 * this.radius); }完整代码见 02-text-to-particles-with-size-changing
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相关内容
- web页面录屏实现html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5移动端开发遇见的东西移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法 HTML5移动端手机网站开发流程HTML5移动端开发中的Viewport标签及相关CSS用法解析整理HTML5移动端开发的常用触摸事件
- 基于 HTML5 WebGL 实现的垃圾分类系统HTML5 WebGL 实现民航客机飞行监控系统基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码基于 HTML5 WebGL 实现的医疗物流系统
- HTML5实现的震撼3D焦点图动画的示例代码HTML5自定义元素播放焦点图动画的实现html4和html5区别之如何在一个input上添加焦点实现代码
- HTML5 Canvas 破碎重组的视频特效的示例代码前端canvas动画如何转成mp4视频的方法canvas像素点操作之视频绿幕抠图video结合canvas实现视频在线截图功能canvas绘制视频封面的方法详解基于canvas的视频遮罩插件canvas与html5实现视频截图功能示例Canvas获取视频第一帧缩略图的实现
- 前端canvas水印快速制作（附完整代码)前端水印的简单实现代码示例手摸手教你用canvas实现给图片添加平铺水印的实现html5 canvas实现给图片添加平铺水印canvas 下载二维码和图片加水印的方法前端使用canvas生成盲水印的加密解密的实现
- canvas实现圆绘制的示例代码利用 Canvas实现绘画一个未闭合的带进度条的圆环使用html5 canvas绘制圆环动效canvas绘制圆角头像的实现方法详解canvas在圆弧周围绘制文本的两种写法详解html2canvas截图不能截取圆角图片的解决方案canvas实现圆形进度条动画的示例代码html5 canvas绘制矩形和圆形的实例代码通过HTML5 Canvas API绘制弧线和圆形的教程HTML5 Canvas中绘制椭圆的4种方法HTML5 Canvas绘制圆点虚线实例
- Html5 Canvas 实现一个“刮刮乐”游戏
- 疯狂猜车标 141-160(关)答案_手机游戏_游戏攻略_
- 我叫MT 登录送紫卡飞龙骑士活动详细介绍_手机游戏_游戏攻略_
