2018-09-21 js文字坠落

作者: 小本YuDL | 来源:发表于2018-09-21 22:49 被阅读26次

2018-09-21 js文字坠落
JS里的数据类型
Three.js中文文档
Vue-06-xiaoming
js文字转拼音（Convert_Pinyin.js）
坠落、坠落、坠落
2018-09-21 Angular.js
文字特效
void *obj = &cls;
坠落，有坠落

看下效果吧。从上往下，文字坠落伴随颜色的变化。

image.png

看下代码：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
        }
        #container{
            width: 100%;
            height: 100%;

        }
    </style>

<body>
   <canvas id="container"></canvas>
</body>
<script>
    var canvas = document.getElementById("container");
    canvas.width = window.innerWidth;
    canvas.height =window.innerHeight;
    var ctx = canvas.getContext("2d");
    var mystyle = "高高是个聪明美丽风度翩翩倾国倾城国色天香
机智勇敢肤白貌美的大长腿无与伦比的小阔爱";
    mystyle = mystyle.split("");//分割成数组
    var font_size = 15;
    var cul = Math.floor(canvas.width/font_size);//计算每行多少列
    console.log(cul);
    var drops = [];
    for(var i =0;i<cul;i++)
        drops[i] = 1;
    console.log(drops);
    function draw() {
        ctx.fillStyle = "rgba(0, 0, 0, 0.03)"; //填充色
        ctx.fillRect(0, 0, canvas.width, canvas.height); //绘制
        for(var i = 0;i<drops.length;i++){
            var text = mystyle[Math.floor(Math.random()*mystyle.length)];
            //数组中随机开始的字
            var gradient =ctx.createLinearGradient(0,0,0,canvas.height); 
            //渐变色,从0到屏幕长度
            gradient.addColorStop("0","green");
            gradient.addColorStop("0.5","blue");
            gradient.addColorStop("1","magenta");
            ctx.fillStyle = gradient;//填充颜色为渐变色
            ctx.font = font_size+'px arial';
            //填充文本，开始绘制x坐标(宽度)，y坐标(长度)
            ctx.fillText(text, i*font_size ,drops[i]*font_size );
         
            if (drops[i]* font_size > canvas.height && Math.random() > 0.975)//停止条件
                drops[i]= 0; //长度为0
            drops[i]++; //长度变长
        }
    }
    setInterval(draw,50);
</script>