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


Posted in HTML / CSS onFebruary 14, 2019

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

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

通过粒子来绘制文本让人感觉很有意思,配合粒子的运动更会让这个效果更加酷炫。本文介绍在 canvas 中通过粒子来绘制文本的方法。

实现原理

总的来说要做出将文本变成粒子展示的效果其实很简单,实现的原理就是使用两张 canvas,一张是用户看不到的 A canvas,用来绘制文本;另一张是用户看到的 B canvas,用来根据 A 的文本数据来生成粒子。直观表示如图:

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

创建离屏 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 上,此时应该如图所示:

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

核心方法 getImageData

使用 canvas 的 getImageData 方法,可以获取一个 ImageData 对象,这个对象用来描述 canvas 指定区域内的像素数据。也就是说,我们可以获取 “Hello” 这个文本每个像素点的位置和颜色,也就可以在指定位置生成粒子,最后形成的效果就是粒子拼凑成文本了。

要获取像素信息,需要使用 ImageData 对象的 data 属性,它将所有像素点的 rgba 值铺开成了一个数组,每个像素点有 rgba 四个值,这个数组的个数也就是 像素点数量 * 4

假设我选取了一个 3 * 4 区域,那么一共 12 个像素点,每个像素点有 rgba 四个值,所以 data 这个数组就会有 12 * 4 = 48 个元素。

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

如果打印出 data,可以看到即从左往右,从上往下排列这些像素点的 rgba。

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

当然我们要获取的区域必须要包含文本,所以应该获取整个离屏 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);
}

效果如下:

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

完整代码见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'
            }));
        }
    }
}

效果如下:

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

如果想实现变大的效果,如:

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

这种要怎么实现呢,首先需要随机产生粒子的大小,这只需要在创建粒子时对 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 中平滑循环改变,很容易让人联想到三角函数,如:

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

横轴应该是与时间相关,可以再维护一个变量每次调用 update 的时候进行加操作,简单做也可以直接用时间戳来进行计算。update 方法示例如下:

update () {
    this.dynamicRadius = 3 + 2 * Math.sin(new Date() / 1000 % 1000 * this.radius);
}

完整代码见 02-text-to-particles-with-size-changing

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 #HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 #HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 #HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 #HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 #HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 #HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 #HTML / CSS
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
php返回json数据函数实例
2014/10/09 PHP
PHP7.0版本备注
2015/07/23 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
寄语学生的话
2014/04/10 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
诚信承诺书
2015/01/19 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
课外活动总结
2015/02/04 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
2015年财政所工作总结
2015/04/25 职场文书
音乐研修感悟
2015/11/18 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
nginx实现动静分离的方法示例
2021/11/07 Servers