canvas特效案例-----字母喷泉

悠悠 2022-01-23 00:33 284阅读 0赞

今天介绍一下如何用canvas实现字母喷泉效果

首先看一下效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70][]

### **分析** ###

发射源始终位于屏幕中下方

不断执行

粒子会运动，同时粒子束越到后面越亮

粒子数量有最大限制

### 功能实现 ###

设置自适应大小函数，窗口大小发生变化时发射源会改变位置(始终位于屏幕的中下方)

设置循环调用函数(请求动画帧)

运动函数

改变粒子位移的同时改变粒子样式

每次循环清除多余粒子

以上的总结虽然不是很全面，但是轮廓是有了，先写着吧，遇到问题再说~

### CSS ###

*{padding:0;margin:0;}
    body{
        overflow: hidden;
    }

### html ###

### JS ###

先把框架给写出来

let anim = {
        // 初始化
        init(){
    
        }
        // 自适应大小
        ,resize(){
        
        }
        // 不断执行函数
        ,loop(){
    
        }
        // 渲染控制
        ,render(){
    
        }
        // 渲染粒子
        ,drawParticles(){
    
        }
        // 粒子淡出
        ,fade(){
    
        }
        // 强制清除多余粒子
        ,clearParticles(){
    
        }
    }
    
    anim.init()

先分析一下，由这个结构可以看出动画效果的执行是通过 init 这个开关实现的

init, resize, loop, clearParticles 这四个函数很好理解，这里不多赘述

我想解释的是渲染render，这个结构怎么有那么多个渲染的功能？？

首先要知道渲染这个功能做了什么

淡出上一个瞬间的粒子

每次执行渲染的时候都要配置新的粒子

渲染已配置的粒子

所以这么多个渲染函数其实是包含关系，render包含了其他的函数，其实也可以写一起，只是分开写的话会更加清晰、可读性会更强

经过上面一波小小的分析，我们再完善一下结构

let anim = {
        // 初始化
        init(){
            
            this.resize() // 初始化窗口大小
            window.addEventListener( 'resize', ()=>this.resize() ) // 以后窗口大小改变时自适应窗口大小
            this.loop() // 不断执行调用
        }
        // 自适应大小
        ,resize(){
        
        }
        // 不断执行函数
        ,loop(){
            this.render()
            requestAnimationFrame( this.loop.bind( this ) )
        }
        // 渲染控制
        ,render(){
            this.fade()
    
    
            this.drawParticles()
            this.clearParticles()
        }
        // 渲染粒子
        ,drawParticles(){
    
        }
        // 粒子淡出
        ,fade(){
    
        }
        // 强制清除多余粒子
        ,clearParticles(){
    
        }
    }
    
    anim.init()

把一些细节都补充完整吧

let anim = {
        // 初始化
        init(){
            this.oC = document.querySelector( 'canvas' )
            this.ctx = this.oC.getContext(  '2d' )
            this.maxParticle = 100 //规定粒子的最大数量
            this.particle = []  //用于存储粒子
    
            this.letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
            this.resize()
            window.addEventListener( 'resize' , ()=>this.resize() )
    
            this.loop()  //不断地去进行调用
        }
        // 自适应大小
        ,resize(){
            this.w = window.innerWidth
            this.h = window.innerHeight
            this.oC.width = this.w
            this.oC.height = this.h
        }
        // 不断执行
        ,loop(){
            this.render()
            requestAnimationFrame( this.loop.bind(this) ) 
        }
        // 渲染
        ,render(){
            // 每次循环都要刷新页面(防止粒子堆积)
            this.fade()
            // 给粒子配置信息
            this.particle.push({
                // 发射源坐标
                x : this.w / 2
                ,y : this.h
                // 粒子速度
                ,xSpeed : (Math.random()*20) - 10 // [-10, 10]
                ,ySpeed : (Math.random()*20) - 10// [-10, 10]
                // 粒子束的第一个字母
                ,font:this.letters[Math.floor(Math.random()*26)]
                // 粒子束的色调
                /*
                    H: Hue 色相 0~360
                    S: Saturation 饱和度  0~100%
                    L: Lightness 亮度 0~100%
                    A: 0~1
                */
                ,color:[200,80,60,0.8]
            })
            // 渲染已配置信息的粒子
            this.drawParticles()
            // 清除粒子
            this.clearParticles()
        }
        ,drawParticles(){
            for( let i = 0, pCount = this.particle.length; i < pCount; i++ ){
                // 获取每个粒子
                let particle = this.particle[i]
                // 获取该粒子的色调
                let h = particle.color[0]
                ,s = particle.color[1] + "%"
                ,l = particle.color[2] + "%"
                ,a = particle.color[3]
                let hsla = `hsla(${h},${s},${l},${a})`
                this.ctx.font = "16px 宋体"
                this.ctx.fillStyle = hsla
                this.ctx.fillText( particle.font, particle.x, particle.y )
    
                // 使粒子运动
                particle.x += particle.xSpeed
                particle.y += particle.ySpeed
                particle.y *= 0.98
    
                // 设置该粒子的色调
                particle.color[0] += 1
                particle.color[2] *= 0.99
    
                // 粒子束的最终样式：一个白字母
                if( particle.color[0] > 299 ){
                    particle.color[2] = 100
                    particle.color[3] = 1
                }
            }
        }
        // 淡出
        ,fade(){
            this.ctx.fillStyle = "rgba(0, 0, 0, 0.1)"
            this.ctx.fillRect(0, 0, this.w, this.h)
        }
        // 强制清除粒子
        ,clearParticles(){
            if( this.particle.length > this.maxParticle ){
                this.particle.shift()
            }
        }
    }
    
    anim.init()

**粒子束是怎么形成的？**

从渲染那一块可以看出粒子的运动和渲染原理：一个粒子束由一个粒子组成( **数组particle**中的每一项就是一个粒子 )

注意一下**render**的顺序：

使上一个瞬间的粒子淡出(样式淡出，但是没有消失，因为只要还在**数组particle**中就会被再次渲染)

配置新的粒子(往**数组particle**中添加新的粒子)

渲染已配置的粒子

清除多余的粒子(从**数组particle**中清除，如果粒子被从该数组中清除，那么就永远消失了)

因此，总体看上去就能实现每个瞬间的粒子闪一下，然后颜色变淡，接着下一瞬间又闪一下，如此循环~~

### 后记 ###

上面的文字只分析了原理，还有一些细节没有分析到，比如箭头函数和bind。如果对于没分析到的细节有疑惑的话就要自己去找文档或者去看别人写的相关的文章了~

希望这篇文章能帮到你~

Wish you godspeed!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70]: /images/20220123/33cebdf2bcdb41cbbe097e78722a5dcc.png