首页 > 作文

Canvas 文本转粒子效果的实现代码

更新时间:2023-04-03 08:10:52 阅读: 评论:0

本文介绍了canvas 文本转粒子效果的实现代码,分享给大家,希望对大家有所帮助,具体如下:

通过粒子来绘制文本让人感觉很有意思,配合粒子的运动更会让这个效果更加酷炫。本文哈艮地介绍在 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.baline = '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, fal);        ctx.fillstyle = this.color;        ctx.fill();        ctx.clopath();    }}

遍历 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: 士兵突击19'#2ea9df'            }));        }    }}

我们用 particles 数组来存放所有的粒子,这里的 skip 的作用是遍历的步长,如果我们一个像素一个像素地扫,那么最后拼凑文本的粒子将会非常密集,增大这个值,最后产生的粒子就会更稀疏。

最后在创建主 canvas 并绘制即可:

const canvas = document.querylector('#stage');canvas.width = width;canvas.height = height;const ctx = canvas.getcontext('2d');for (const particle of particles) {    particle.draw(ctx);}

效果如下:

完整代码见

添加效果

了解实现原理之后,其实其他的就都是给粒子添加一些动效了。首先可以让粒子有一些随机的位移,避免看上去过于整齐。

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, fal); // 替换为 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);}

完整代码见

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。

本文发布于:2023-04-03 08:10:50,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/166ca83a846e4cd9dc89f63b26b72726.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:Canvas 文本转粒子效果的实现代码.doc

本文 PDF 下载地址:Canvas 文本转粒子效果的实现代码.pdf

标签:粒子   像素   文本   效果
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图