html5酷炫字母喷射动画效果免费下载

html5酷炫字母喷射动画效果,canvas绘制英文字母字符像喷泉喷水一样向上喷射动画特效。

JS代码

<script> 
var Canvas = {}; 
Canvas.anim = { 
    //初始化 
    init: function() { 
        var canvas = document.getElementById('canvas'); 
        canvas.width = window.innerWidth; 
        canvas.height = window.innerHeight; 
        this.ctx = canvas.getContext('2d'); 
        this.cw = canvas.width; 
        this.ch = canvas.height; 
        this.particles = []; 
        this.letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
    }, 
    //执行动画 
    render: function() { 
        //显示位置  
        var particle = { 
            x: this.cw / 2, 
            y: this.ch, 
            character: this.letters[Math.floor(Math.random() * this.letters.length)], 
            xSpeed: (Math.random() * 20) - 10, 
            ySpeed: (Math.random() * 20) - 10, 
            color: [155, 100, 50, .7] 
        } 
        this.particles.push(particle); 
        this.drawparticles(); 
    }, 
    //绘制字母 
    drawparticles: function() { 
        this.fadeCanvas() 
        var particleCount = this.particles.length; 
        for (var i = 0; i < particleCount; i++) { 
            var particle = this.particles[i]; 
            var h = particle.color[0], 
                s = particle.color[1] + '%', 
                l = particle.color[2] + '%', 
                a = particle.color[3]; 
            var hsla = `hsla(${h},${s},${l},${a})` 
            this.ctx.font = '18px sans-serif'; 
            this.ctx.fillStyle = hsla; //字体颜色 
 
            this.ctx.fillText(particle.character, particle.x, particle.y); //字体属性 
            particle.x += particle.xSpeed 
            particle.y += particle.ySpeed 
            particle.y *= 0.98; 
            particle.color[2] *= 0.99; 
            particle.color[0] += 1; 
            if (particle.color[0] > 253) { 
                particle.color[2] = 0; 
            } 
        } 
    }, 
    //先清除画布 
    fadeCanvas: function() { 
        this.ctx.fillStyle = 'rgba(0,0,0,.5)' 
        this.ctx.fillRect(0, 0, this.cw, this.ch); 
    } 
} 
Canvas.anim.init(); 
Canvas.anim.render(); 
setInterval(function() { 
    Canvas.anim.render(); 
}, 60) 
window.onresize = function() { 
    Canvas.anim.init(); 
}</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录