zoukankan      html  css  js  c++  java

  • canvas二进制字符下落

     
    ?
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>二进制雨</title>
    </head>
    <body align="center">

    <h2>二进制雨</h2>

    <-- 宽高原先是1000*600 js忘了改-->
    <canvas id="myCanvas" width="480px" height="320px" style="background-color: black;"></canvas>

    <script>

    var draw=function(ctx,x,y,size){
    this.ctx=ctx;
    this.x=x;
    this.y=y;
    this.size=size;
    var y1=this.y;
    this.drawText=function(){
    var str=Math.ceil(Math.random()*10000).toString(2);
    var grd=this.ctx.createLinearGradient(this.x,this.y,this.x,this.y-this.ctx.measureText(str).width);
    grd.addColorStop(0,"#00FF00");
    grd.addColorStop(1,"#004400");
    this.ctx.fillStyle=grd;
    this.ctx.font=this.size+"px Arial";
    for(var i=str.length-1;i>=0;i--) {
    this.ctx.fillText(str.charAt(i), this.x, y1-=15);
    }
    y1=this.y+=10;
    if(y1-720+this.ctx.measureText(str).width>0){
    this.x=Math.ceil(Math.random()*1000);
    y1=this.y=Math.ceil(Math.random()*100);
    }
    }
    };

    var rain=function(ctx,length){
    this.length=length;
    this.ctx=ctx;
    var x=[];
    var y=[];
    var size=[];
    var texts=[];
    var i=0;
    for(;i<length;i++){
    x[i]=Math.ceil(Math.random()*1000);
    y[i]=Math.ceil(Math.random()*500);
    size[i]=Math.ceil(Math.random()*15);
    texts[i]=new draw(this.ctx,x[i],y[i],size[i]);
    }
    this.run=function(){
    ctx.clearRect(0,0,1000,600);
    for(var j=0;j<length;j++){
    texts[j].drawText();
    }
    };

    };

    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    var rain0=new rain(ctx,100);
    setInterval(rain0.run,50);

    </script>
    </body>
    </html>

        

     

    当时是初学 并没有对代码优化,所以看看就好. 

     

    canvas二进制雨  | 菜鸟工具
    预览https://c.runoob.com/codedemo/3301

     

     
  • 相关阅读:
    project
    类欧几里得算法
    还不熟悉的内容
    Hall定理
    FWT学习笔记
    最小树形图
    BZOJ 3027 [Ceoi2004]Sweet
    多项式除法
    VUE 计算属性和侦听器
    VUE 模板语法
  • 原文地址：https://www.cnblogs.com/startnow/p/5013383.html
Copyright © 2011-2022 走看看