canvas背景 - foreverwaiting

canvas背景

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>canvas字母喷射效果</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000000;
            overflow:hidden;
        }
    </style>
 </head>
 <body>
    <canvas id=canvas></canvas>
    <script>
        
        //页面命名空间 命名空间就是对象 需要用到this
        var Canvas={};
        Canvas.anim={
            //初始化
            init:function(){
                var canvas=document.getElementById("canvas");
                this.ctx=canvas.getContext("2d");//画笔，创建2d空间，加this相当于全局变量
                canvas.width=window.innerWidth;
                canvas.height=window.innerHeight;
                this.letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                this.cw=canvas.width;
                this.ch=canvas.height;
                this.particles=[];
            },
            //执行动画
            render:function(){
                //粒子的属性
                var particle={
                    //显示的位置random为随机数0-1 
                    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
                }
                this.particles.push(particle);
                this.drawParticles();
            },
            //绘制字母
            drawParticles: function(){
                this.fadeCanvas();
                var particleCount=this.particles.length;
                var c=this.ctx;
                for(var i=0;i<particleCount;i++){
                        var particle=this.particles[i];
                    c.font="12px sans-serif";
                    c.fillStyle="#ffffff";
                    c.fillText(particle.character,particle.x,particle.y);
                    particle.x += particle.xSpeed;
                    particle.y += particle.ySpeed;
                    // 驶近Y轴
                    particle.y *= 0.97;
                }
            },
            //清除画布
            fadeCanvas: function(){
                this.ctx.fillStyle = "rgba(0,0,0,0.5)";
                this.ctx.fillRect(0,0,this.cw,this.ch);
            }
        };
        Canvas.anim.init();
        setInterval(function(){
            Canvas.anim.render();
        },13);
    </script>
 </body>
</html>

加入绘制字母

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>canvas字母喷射</title>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    #canvas{
        background-color:#000;
    }
</style>
<body>
    <canvas id="canvas"></canvas>
</body>

<script>
    // 页面命名空间
    var Canvas = {}
    Canvas.anim = {
        // 初始化
        init: function(){
            var canvas = document.getElementById("canvas");
            this.ctx = canvas.getContext("2d");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            this.cw = canvas.width;
            this.ch = canvas.height;
            // 随机字母
            this.letters = "QWERTYUIOPLKJHGFDSAZXCVBNM";
            // 位置
            this.particles = [];
        },
        // 执行动画
        rander: 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
            }
            this.particles.push(particle);
            this.drawParticles();
        },
        // 绘制字母
        drawParticles: function(){
            this.fadeCanvas();
            var c = this.ctx;
            // 喷射字母
            var particleCount = this.particles.length;
            for(var i=0;i<particleCount;i++){
                var particle = this.particles[i];
                c.font = "12px";
                c.fillStyle = "#ffffff";
                c.fillText(particle.character,particle.x,particle.y);
                particle.x += particle.xSpeed;
                particle.y += particle.ySpeed;
                // 驶近Y轴
                particle.y *= 0.97;
            }
            // 绘制名字
            var fontParticleCount = Font.particles.length;
            for(var i=0;i<fontParticleCount;i++){
                var particle = Font.particles[i];
                c.font = "12px";
                c.fillStyle = "#ff00cc";
                c.fillText(particle.character,particle.x,particle.y);
            }
        },
        // 清除画布
        fadeCanvas: function(){
            this.ctx.fillStyle = "rgba(0,0,0,0.5)";
            this.ctx.fillRect(0,0,this.cw,this.ch);
        }
    };
    Canvas.anim.init();
    var Font = {
        init: function(){
            this.startX = window.innerWidth/2-150;
            this.startY = window.innerHeight/2-200;
            this.speed = 130; // 速度值
            this.smallSpace = 10; // 字母间隔
            // 字母位置
            this.particles = [];
        },
        // 执行动画
        rander: function(xPoint, yPoint){
            // 显示的位置
            var particle = {
                x: xPoint,
                y: yPoint,
                // 随机字母
                character: "0",
            }
            this.particles.push(particle);
        },
        // 画I
        draw_i: function(callback){
            var _this = this;
            var width=40,height=100;
            // 画-
            var draw_1 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    _this.rander(_this.startX+_this.smallSpace*i,_this.startY);
                    if(_this.smallSpace*i >= width){
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            // 画|
            var draw_2 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    _this.rander(_this.startX+width/2+_this.smallSpace/2,_this.startY+_this.smallSpace*i);
                    if(_this.smallSpace*i >= height){
                        clearInterval(intVal);
                        draw_3();
                    }
                },_this.speed);
            }
            // 画-
            var draw_3 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    _this.rander(_this.startX+_this.smallSpace*i,_this.startY+height+_this.smallSpace);
                    if(_this.smallSpace*i >= width){
                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        },
        // 画心形
        draw_v: function(callback){
            var _this = this;
            var v_startX = _this.startX;
            var v_startY = _this.startY;
            var width=80,height=100;
            // 凹度,高
            var concave = 15;
            // 斜边，宽高
            var hypotenuseWidth = 20;
            var hypotenuseHeight = 100;
            var draw_1 = function(){
                var i = 0;
                _this.rander(v_startX,v_startY+concave);
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var y = concave/(width/2/_this.smallSpace)*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+concave-y);
                    if(_this.smallSpace*i >= width/2){
                        v_startX = v_startX-_this.smallSpace*i;
                        v_startY = v_startY+concave-y;
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            var draw_2 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var y = hypotenuseHeight/_this.smallSpace*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+y);
                    if(_this.smallSpace*i >= hypotenuseWidth){
                        v_startX = v_startX-_this.smallSpace*i;
                        v_startY = v_startY+y;
                        clearInterval(intVal);
                        draw_3();
                    }
                },_this.speed);
            }
            var draw_3 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var x = (width/2+hypotenuseWidth)/_this.smallSpace*i;
                    _this.rander(v_startX+x,v_startY+_this.smallSpace*i);
                    if(_this.smallSpace*i >= height){
                        v_startX = v_startX+x;
                        v_startY = v_startY+_this.smallSpace*i;
                        clearInterval(intVal);
                        draw_4();
                    }
                },_this.speed);
            }
            var draw_4 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var x = (width/2+hypotenuseWidth)/_this.smallSpace*i;
                    _this.rander(v_startX+x,v_startY-_this.smallSpace*i);
                    if(_this.smallSpace*i >= height){
                        v_startX = v_startX+x;
                        v_startY = v_startY-_this.smallSpace*i;
                        clearInterval(intVal);
                        draw_5();
                    }
                },_this.speed);
            }
            var draw_5 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var y = hypotenuseHeight/_this.smallSpace*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY-y);
                    if(_this.smallSpace*i >= hypotenuseWidth){
                        v_startX = v_startX-_this.smallSpace*i;
                        v_startY = v_startY-y;
                        clearInterval(intVal);
                        draw_6();
                    }
                },_this.speed);
            }
            var draw_6 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var y = concave/(width/2/_this.smallSpace)*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+y);
                    if(_this.smallSpace*i >= width/2){
                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        },
        // 画U
        draw_u: function(callback){
            var _this = this;
            var width=60,height=120;
            // 画U_|
            var draw_1 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    _this.rander(_this.startX,_this.startY+_this.smallSpace*i);
                    if(_this.smallSpace*(i+2) >= height){
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            // 画U_-
            var draw_2 = function(){
                var function1 = function(){
                    var i = 0;
                    // 处理的高度
                    var cHeight = _this.smallSpace*2;
                    var intVal = setInterval(function(){
                        i++;
                        /*
                        * 每次偏移量
                        * _this.smallSpace*2留的高度
                        */ 
                        var y = cHeight/(width/_this.smallSpace)*i;
                        var y_point = _this.startY+(height-cHeight)+y;
                        _this.rander(_this.startX+_this.smallSpace*i,y_point);
                        if(_this.smallSpace*i >= width/2){
                            clearInterval(intVal);
                            function2();
                        }
                    },_this.speed);
                }
                var function2 = function(){
                    var i = 0;
                    var intVal = setInterval(function(){
                        i++;
                        // 处理的高度
                        var cHeight = _this.smallSpace*2;
                        /*
                        * 每次偏移量
                        * _this.smallSpace*2留的高度
                        */ 
                        var y = cHeight/(width/_this.smallSpace)*i;
                        var y_point = _this.startY+(height-_this.smallSpace)-y;
                        _this.rander(_this.startX+width/2+_this.smallSpace*i,y_point);
                        if(_this.smallSpace*i >= width/2){
                            clearInterval(intVal);
                            draw_3();
                        }
                    },_this.speed);
                }
                function1();
            }
            // 画U_|
            var draw_3 = function(){
                var i = 0;
                // 处理的高度
                var cHeight = _this.smallSpace*2;
                var intVal = setInterval(function(){
                    i++;
                    var y_point = _this.startY+(height-cHeight)-_this.smallSpace*i;
                    _this.rander(_this.startX+width,y_point);
                    if(_this.smallSpace*(i+3) >= height){
                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        }
    };
    Font.init();
    setInterval(function(){
        Canvas.anim.rander();
    },20);
    //Font.draw_v();
    Font.draw_i(function(){
        Font.startX += 150;
        Font.draw_v(function(){
            Font.startX += 120;
            Font.draw_u(function(){});
        });
    });
</script>

posted on 2018-05-30 21:49 foreverwaiting 阅读(1036) 评论(2) 收藏举报