文字雨滴，很酷炫的效果！-蒲公英云

文字雨滴，很酷炫的效果！

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Html5下炫酷文字雨滴效果_简单实现</title>
</head>
<body bgcolor="#00008b">
 <div id="test"></div>
  <br>
 <input οnclick="operateAnimation(this)" id="operate" type="button" value="暂停" />
 <br>
 <canvas id="c"></canvas>
<script language="JavaScript" src="js/app.js">
</script>
</body>
</html>

var test = document.getElementById("test");
var str = "str";
var c = document.getElementById("c");
var ctx = c.getContext("2d");
c.width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
c.height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
 var chinese = "炫酷雨滴";
chinese = chinese.split("");
var fsize = 20;
 columns = c.width / fsize;
var drops=[];
for(var x=0;x<columns;x++) {
    drops[x] = 0;
}
function draw(){
    ctx.fillStyle="rgba(0,0,0,0.09)";
    ctx.fillRect(0,0, c.width, c.height);
    ctx.fillStyle="#0f0";
    ctx.font = fsize + "px arial";// arial is font
   for(var i=0;i<drops.length;i++){
        var text = chinese[Math.floor(Math.random()*chinese.length)];
        ctx.fillText(text,i*fsize,drops[i]*fsize);
        drops[i]++;
        if(drops[i]*fsize > c.height && Math.random() > 0.9){
            drops[i] = 0;
    }
    str = drops[i]+",";
    test.innerText = columns + " , i:" + str;// 测试数据
}
var intervalId = setInterval(draw,50);// 这里修改控制速度
function operateAnimation(objBtn){
   var operate = document.getElementById("operate");
   f(objBtn.value == "开始"){
        objBtn.value = "暂停";
        intervalId = setInterval(draw,30);
    }else{
        objBtn.value = "开始";
        clearInterval(intervalId);
    }
    return false;
}