Canvas 文本转粒子效果的实现代码
|
副问题[/!--empirenews.page--]
通过粒子来绘制文本让人感受很故意思，共同粒子的行为更会让这个结果越发酷炫。本文先容在 canvas 中通过粒子来绘制文本的要领。 实现道理 总的来说要做出将文本酿成粒子展示的结果着实很简朴，实现的道理就是行使两张 canvas，一张是用户看不到的 A canvas，用来绘制文本；另一张是用户看到的 B canvas，用来按照 A 的文本数据来天生粒子。直观暗示如图： 建设离屏 canvas HTML 只必要安排主 canvas 即可： <!-- HTML 布局 --> <html> <head> ... </head> <body> <canvas id="stage"></canvas> </body> </html> 然后建设一个离屏 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' })); } } } 结果如下： 假如想实现变大的结果，如： （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
