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

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

首先看一下效果图

分析

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

不断执行

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

粒子数量有最大限制

功能实现

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

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

运动函数

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

每次循环清除多余粒子

 

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

 

CSS

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

html

<canvas></canvas>

JS

先把框架给写出来

let anim = {
    // 初始化
    init(){

    }
    // 自适应大小
    ,resize(){
    
    }
    //