canvas 배경

 
  
  
    
 
 
    
    
        
        <span style="color: #008000;">//</span><span style="color: #008000;">                    this</span>
        <span style="color: #0000ff;">var</span> Canvas=<span style="color: #000000;">{};
        Canvas.anim</span>=<span style="color: #000000;">{
            </span><span style="color: #008000;">//</span><span style="color: #008000;">   </span>
            init:<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> canvas=document.getElementById("canvas"<span style="color: #000000;">);
                </span><span style="color: #0000ff;">this</span>.ctx=canvas.getContext("2d");<span style="color: #008000;">//</span><span style="color: #008000;">  ，  2d  ， this       </span>
                canvas.width=<span style="color: #000000;">window.innerWidth;
                canvas.height</span>=<span style="color: #000000;">window.innerHeight;
                </span><span style="color: #0000ff;">this</span>.letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"<span style="color: #000000;">;
                </span><span style="color: #0000ff;">this</span>.cw=<span style="color: #000000;">canvas.width;
                </span><span style="color: #0000ff;">this</span>.ch=<span style="color: #000000;">canvas.height;
                </span><span style="color: #0000ff;">this</span>.particles=<span style="color: #000000;">[];
            },
            </span><span style="color: #008000;">//</span><span style="color: #008000;">    </span>
            render:<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
                <span style="color: #0000ff;">var</span> particle=<span style="color: #000000;">{
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">     random    0-1 </span>
                    x:<span style="color: #0000ff;">this</span>.cw/2,
                    y:<span style="color: #0000ff;">this</span><span style="color: #000000;">.ch,
                    character:</span><span style="color: #0000ff;">this</span>.letters[Math.floor(Math.random()*<span style="color: #0000ff;">this</span><span style="color: #000000;">.letters.length)],
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">   </span>
                    xSpeed: (Math.random()*20)-10<span style="color: #000000;">,
                    ySpeed: (Math.random()</span>*20)-10<span style="color: #000000;">
                }
                </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.particles.push(particle);
                </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.drawParticles();
            },
            </span><span style="color: #008000;">//</span><span style="color: #008000;">    </span>
            drawParticles: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.fadeCanvas();
                </span><span style="color: #0000ff;">var</span> particleCount=<span style="color: #0000ff;">this</span><span style="color: #000000;">.particles.length;
                </span><span style="color: #0000ff;">var</span> c=<span style="color: #0000ff;">this</span><span style="color: #000000;">.ctx;
                </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0;i<particleCount;i++<span style="color: #000000;">){
                        </span><span style="color: #0000ff;">var</span> particle=<span style="color: #0000ff;">this</span><span style="color: #000000;">.particles[i];
                    c.font</span>="12px sans-serif"<span style="color: #000000;">;
                    c.fillStyle</span>="#ffffff"<span style="color: #000000;">;
                    c.fillText(particle.character,particle.x,particle.y);
                    particle.x </span>+=<span style="color: #000000;"> particle.xSpeed;
                    particle.y </span>+=<span style="color: #000000;"> particle.ySpeed;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">   Y </span>
                    particle.y *= 0.97<span style="color: #000000;">;
                }
            },
            </span><span style="color: #008000;">//</span><span style="color: #008000;">    </span>
            fadeCanvas: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">this</span>.ctx.fillStyle = "rgba(0,0,0,0.5)"<span style="color: #000000;">;
                </span><span style="color: #0000ff;">this</span>.ctx.fillRect(0,0,<span style="color: #0000ff;">this</span>.cw,<span style="color: #0000ff;">this</span><span style="color: #000000;">.ch);
            }
        };
        Canvas.anim.init();
        setInterval(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            Canvas.anim.render();
        },</span>13<span style="color: #000000;">);
    </span>
 

 
  
  


    



    <span style="color: #008000;">//</span><span style="color: #008000;">       </span>
    <span style="color: #0000ff;">var</span> Canvas =<span style="color: #000000;"> {}
    Canvas.anim </span>=<span style="color: #000000;"> {
        </span><span style="color: #008000;">//</span><span style="color: #008000;">    </span>
        init: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            </span><span style="color: #0000ff;">var</span> canvas = document.getElementById("canvas"<span style="color: #000000;">);
            </span><span style="color: #0000ff;">this</span>.ctx = canvas.getContext("2d"<span style="color: #000000;">);
            canvas.width </span>=<span style="color: #000000;"> window.innerWidth;
            canvas.height </span>=<span style="color: #000000;"> window.innerHeight;
            </span><span style="color: #0000ff;">this</span>.cw =<span style="color: #000000;"> canvas.width;
            </span><span style="color: #0000ff;">this</span>.ch =<span style="color: #000000;"> canvas.height;
            </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
            <span style="color: #0000ff;">this</span>.letters = "QWERTYUIOPLKJHGFDSAZXCVBNM"<span style="color: #000000;">;
            </span><span style="color: #008000;">//</span><span style="color: #008000;">   </span>
            <span style="color: #0000ff;">this</span>.particles =<span style="color: #000000;"> [];
        },
        </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
        rander: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
            <span style="color: #0000ff;">var</span> particle =<span style="color: #000000;"> {
                x: </span><span style="color: #0000ff;">this</span>.cw/2,
                y: <span style="color: #0000ff;">this</span><span style="color: #000000;">.ch,
                </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
                character: <span style="color: #0000ff;">this</span>.letters[Math.floor(Math.random()*<span style="color: #0000ff;">this</span><span style="color: #000000;">.letters.length)],
                </span><span style="color: #008000;">//</span><span style="color: #008000;">    </span>
                xSpeed: (Math.random()*20)-10<span style="color: #000000;">,
                ySpeed: (Math.random()</span>*20)-10<span style="color: #000000;">
            }
            </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.particles.push(particle);
            </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.drawParticles();
        },
        </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
        drawParticles: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.fadeCanvas();
            </span><span style="color: #0000ff;">var</span> c = <span style="color: #0000ff;">this</span><span style="color: #000000;">.ctx;
            </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
            <span style="color: #0000ff;">var</span> particleCount = <span style="color: #0000ff;">this</span><span style="color: #000000;">.particles.length;
            </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0;i<particleCount;i++<span style="color: #000000;">){
                </span><span style="color: #0000ff;">var</span> particle = <span style="color: #0000ff;">this</span><span style="color: #000000;">.particles[i];
                c.font </span>= "12px"<span style="color: #000000;">;
                c.fillStyle </span>= "#ffffff"<span style="color: #000000;">;
                c.fillText(particle.character,particle.x,particle.y);
                particle.x </span>+=<span style="color: #000000;"> particle.xSpeed;
                particle.y </span>+=<span style="color: #000000;"> particle.ySpeed;
                </span><span style="color: #008000;">//</span><span style="color: #008000;">   Y </span>
                particle.y *= 0.97<span style="color: #000000;">;
            }
            </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
            <span style="color: #0000ff;">var</span> fontParticleCount =<span style="color: #000000;"> Font.particles.length;
            </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0;i<fontParticleCount;i++<span style="color: #000000;">){
                </span><span style="color: #0000ff;">var</span> particle =<span style="color: #000000;"> Font.particles[i];
                c.font </span>= "12px"<span style="color: #000000;">;
                c.fillStyle </span>= "#ff00cc"<span style="color: #000000;">;
                c.fillText(particle.character,particle.x,particle.y);
            }
        },
        </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
        fadeCanvas: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            </span><span style="color: #0000ff;">this</span>.ctx.fillStyle = "rgba(0,0,0,0.5)"<span style="color: #000000;">;
            </span><span style="color: #0000ff;">this</span>.ctx.fillRect(0,0,<span style="color: #0000ff;">this</span>.cw,<span style="color: #0000ff;">this</span><span style="color: #000000;">.ch);
        }
    };
    Canvas.anim.init();
    </span><span style="color: #0000ff;">var</span> Font =<span style="color: #000000;"> {
        init: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            </span><span style="color: #0000ff;">this</span>.startX = window.innerWidth/2-150;
            <span style="color: #0000ff;">this</span>.startY = window.innerHeight/2-200;
            <span style="color: #0000ff;">this</span>.speed = 130; <span style="color: #008000;">//</span><span style="color: #008000;">    </span>
            <span style="color: #0000ff;">this</span>.smallSpace = 10; <span style="color: #008000;">//</span><span style="color: #008000;">     </span>
            <span style="color: #008000;">//</span><span style="color: #008000;">     </span>
            <span style="color: #0000ff;">this</span>.particles =<span style="color: #000000;"> [];
        },
        </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
        rander: <span style="color: #0000ff;">function</span><span style="color: #000000;">(xPoint, yPoint){
            </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
            <span style="color: #0000ff;">var</span> particle =<span style="color: #000000;"> {
                x: xPoint,
                y: yPoint,
                </span><span style="color: #008000;">//</span><span style="color: #008000;">     </span>
                character: "0"<span style="color: #000000;">,
            }
            </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.particles.push(particle);
        },
        </span><span style="color: #008000;">//</span><span style="color: #008000;">  I</span>
        draw_i: <span style="color: #0000ff;">function</span><span style="color: #000000;">(callback){
            </span><span style="color: #0000ff;">var</span> _this = <span style="color: #0000ff;">this</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">var</span> width=40,height=100<span style="color: #000000;">;
            </span><span style="color: #008000;">//</span><span style="color: #008000;">  -</span>
            <span style="color: #0000ff;">var</span> draw_1 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    _this.rander(_this.startX</span>+_this.smallSpace*<span style="color: #000000;">i,_this.startY);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >=<span style="color: #000000;"> width){
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            </span><span style="color: #008000;">//</span><span style="color: #008000;">  |</span>
            <span style="color: #0000ff;">var</span> draw_2 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    _this.rander(_this.startX</span>+width/2+_this.smallSpace/2,_this.startY+_this.smallSpace*<span style="color: #000000;">i);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >=<span style="color: #000000;"> height){
                        clearInterval(intVal);
                        draw_3();
                    }
                },_this.speed);
            }
            </span><span style="color: #008000;">//</span><span style="color: #008000;">  -</span>
            <span style="color: #0000ff;">var</span> draw_3 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    _this.rander(_this.startX</span>+_this.smallSpace*i,_this.startY+height+<span style="color: #000000;">_this.smallSpace);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >=<span style="color: #000000;"> width){
                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        },
        </span><span style="color: #008000;">//</span><span style="color: #008000;">    </span>
        draw_v: <span style="color: #0000ff;">function</span><span style="color: #000000;">(callback){
            </span><span style="color: #0000ff;">var</span> _this = <span style="color: #0000ff;">this</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">var</span> v_startX =<span style="color: #000000;"> _this.startX;
            </span><span style="color: #0000ff;">var</span> v_startY =<span style="color: #000000;"> _this.startY;
            </span><span style="color: #0000ff;">var</span> width=80,height=100<span style="color: #000000;">;
            </span><span style="color: #008000;">//</span><span style="color: #008000;">   , </span>
            <span style="color: #0000ff;">var</span> concave = 15<span style="color: #000000;">;
            </span><span style="color: #008000;">//</span><span style="color: #008000;">   ，  </span>
            <span style="color: #0000ff;">var</span> hypotenuseWidth = 20<span style="color: #000000;">;
            </span><span style="color: #0000ff;">var</span> hypotenuseHeight = 100<span style="color: #000000;">;
            </span><span style="color: #0000ff;">var</span> draw_1 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                _this.rander(v_startX,v_startY</span>+<span style="color: #000000;">concave);
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                    <span style="color: #0000ff;">var</span> y = concave/(width/2/_this.smallSpace)*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+concave-<span style="color: #000000;">y);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >= width/2){
                        v_startX = v_startX-_this.smallSpace*<span style="color: #000000;">i;
                        v_startY </span>= v_startY+concave-<span style="color: #000000;">y;
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            </span><span style="color: #0000ff;">var</span> draw_2 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                    <span style="color: #0000ff;">var</span> y = hypotenuseHeight/_this.smallSpace*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+<span style="color: #000000;">y);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >=<span style="color: #000000;"> hypotenuseWidth){
                        v_startX </span>= v_startX-_this.smallSpace*<span style="color: #000000;">i;
                        v_startY </span>= v_startY+<span style="color: #000000;">y;
                        clearInterval(intVal);
                        draw_3();
                    }
                },_this.speed);
            }
            </span><span style="color: #0000ff;">var</span> draw_3 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                    <span style="color: #0000ff;">var</span> x = (width/2+hypotenuseWidth)/_this.smallSpace*<span style="color: #000000;">i;
                    _this.rander(v_startX</span>+x,v_startY+_this.smallSpace*<span style="color: #000000;">i);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >=<span style="color: #000000;"> height){
                        v_startX </span>= v_startX+<span style="color: #000000;">x;
                        v_startY </span>= v_startY+_this.smallSpace*<span style="color: #000000;">i;
                        clearInterval(intVal);
                        draw_4();
                    }
                },_this.speed);
            }
            </span><span style="color: #0000ff;">var</span> draw_4 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                    <span style="color: #0000ff;">var</span> x = (width/2+hypotenuseWidth)/_this.smallSpace*<span style="color: #000000;">i;
                    _this.rander(v_startX</span>+x,v_startY-_this.smallSpace*<span style="color: #000000;">i);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >=<span style="color: #000000;"> height){
                        v_startX </span>= v_startX+<span style="color: #000000;">x;
                        v_startY </span>= v_startY-_this.smallSpace*<span style="color: #000000;">i;
                        clearInterval(intVal);
                        draw_5();
                    }
                },_this.speed);
            }
            </span><span style="color: #0000ff;">var</span> draw_5 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                    <span style="color: #0000ff;">var</span> y = hypotenuseHeight/_this.smallSpace*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY-<span style="color: #000000;">y);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >=<span style="color: #000000;"> hypotenuseWidth){
                        v_startX </span>= v_startX-_this.smallSpace*<span style="color: #000000;">i;
                        v_startY </span>= v_startY-<span style="color: #000000;">y;
                        clearInterval(intVal);
                        draw_6();
                    }
                },_this.speed);
            }
            </span><span style="color: #0000ff;">var</span> draw_6 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                    <span style="color: #0000ff;">var</span> y = concave/(width/2/_this.smallSpace)*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+<span style="color: #000000;">y);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >= width/2){
<span style="color: #000000;">                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        },
        </span><span style="color: #008000;">//</span><span style="color: #008000;">  U</span>
        draw_u: <span style="color: #0000ff;">function</span><span style="color: #000000;">(callback){
            </span><span style="color: #0000ff;">var</span> _this = <span style="color: #0000ff;">this</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">var</span> width=60,height=120<span style="color: #000000;">;
            </span><span style="color: #008000;">//</span><span style="color: #008000;">  U_|</span>
            <span style="color: #0000ff;">var</span> draw_1 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    _this.rander(_this.startX,_this.startY</span>+_this.smallSpace*<span style="color: #000000;">i);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*(i+2) >=<span style="color: #000000;"> height){
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            </span><span style="color: #008000;">//</span><span style="color: #008000;">  U_-</span>
            <span style="color: #0000ff;">var</span> draw_2 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> function1 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                    <span style="color: #0000ff;">var</span> cHeight = _this.smallSpace*2<span style="color: #000000;">;
                    </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                        i</span>++<span style="color: #000000;">;
                        </span><span style="color: #008000;">/*</span><span style="color: #008000;">
                        *      
                        * _this.smallSpace*2    
                        </span><span style="color: #008000;">*/</span> 
                        <span style="color: #0000ff;">var</span> y = cHeight/(width/_this.smallSpace)*<span style="color: #000000;">i;
                        </span><span style="color: #0000ff;">var</span> y_point = _this.startY+(height-cHeight)+<span style="color: #000000;">y;
                        _this.rander(_this.startX</span>+_this.smallSpace*<span style="color: #000000;">i,y_point);
                        </span><span style="color: #0000ff;">if</span>(_this.smallSpace*i >= width/2){
<span style="color: #000000;">                            clearInterval(intVal);
                            function2();
                        }
                    },_this.speed);
                }
                </span><span style="color: #0000ff;">var</span> function2 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                    </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                        i</span>++<span style="color: #000000;">;
                        </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                        <span style="color: #0000ff;">var</span> cHeight = _this.smallSpace*2<span style="color: #000000;">;
                        </span><span style="color: #008000;">/*</span><span style="color: #008000;">
                        *      
                        * _this.smallSpace*2    
                        </span><span style="color: #008000;">*/</span> 
                        <span style="color: #0000ff;">var</span> y = cHeight/(width/_this.smallSpace)*<span style="color: #000000;">i;
                        </span><span style="color: #0000ff;">var</span> y_point = _this.startY+(height-_this.smallSpace)-<span style="color: #000000;">y;
                        _this.rander(_this.startX</span>+width/2+_this.smallSpace*i,y_point);
                        <span style="color: #0000ff;">if</span>(_this.smallSpace*i >= width/2){
<span style="color: #000000;">                            clearInterval(intVal);
                            draw_3();
                        }
                    },_this.speed);
                }
                function1();
            }
            </span><span style="color: #008000;">//</span><span style="color: #008000;">  U_|</span>
            <span style="color: #0000ff;">var</span> draw_3 = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> i = 0<span style="color: #000000;">;
                </span><span style="color: #008000;">//</span><span style="color: #008000;">      </span>
                <span style="color: #0000ff;">var</span> cHeight = _this.smallSpace*2<span style="color: #000000;">;
                </span><span style="color: #0000ff;">var</span> intVal = setInterval(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    i</span>++<span style="color: #000000;">;
                    </span><span style="color: #0000ff;">var</span> y_point = _this.startY+(height-cHeight)-_this.smallSpace*<span style="color: #000000;">i;
                    _this.rander(_this.startX</span>+<span style="color: #000000;">width,y_point);
                    </span><span style="color: #0000ff;">if</span>(_this.smallSpace*(i+3) >=<span style="color: #000000;"> height){
                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        }
    };
    Font.init();
    setInterval(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        Canvas.anim.rander();
    },</span>20<span style="color: #000000;">);
    </span><span style="color: #008000;">//</span><span style="color: #008000;">Font.draw_v();</span>
    Font.draw_i(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        Font.startX </span>+= 150<span style="color: #000000;">;
        Font.draw_v(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            Font.startX </span>+= 120<span style="color: #000000;">;
            Font.draw_u(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){});
        });
    });
</span>