js字符喷射

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

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();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js字符喷射-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号