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>
js
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;
}