canvas文字雨滴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字瀑布</title>
</head>
<body>
<div id="test"></div>
<br />
<!-- <input onclick="operateAnimation(this)" id="operate" type="button" value="暂停"> -->
<input onclick="operateAnimation(this)" type="button" value="暂停" id="operate">
<br />
<canvas id="canvas" style="background: #000;"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas")
var content = canvas.getContext("2d")
var W = document.innerWidth||document.documentElement.cilenWidth||document.body.clientWidth;
var H = document.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
canvas.width = W
canvas.height = H
var fontSize = 16;
var colunms = Math.floor(W / fontSize)
var drops = []
for (var i=0;i<colunms;i++) {
drops.push(0)
}
console.log(drops)
var str = "显示的运动文字"
function draw(){
content.fillStyle = "rgba(0,0,0,0.05)";
content.fillRect(0,0,W,H)
content.fillStyle= "#ff00ff"
for (var i=0;i<colunms;i++) {
var index = Math.floor(Math.random()*str.length)
var x= i*fontSize
var y= drops[i]*fontSize
content.fillText(index,x,y)
if(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++
}
};
draw()
var intervalId = setInterval(draw,30)
function operateAnimation(objBtn){
var operate = document.getElementById("operate")
if(objBtn.value=="开始"){
objBtn.value="暂停"
intervalId = setInterval(draw,30)
}else{
objBtn.value="开始"
clearInterval(intervalId)
}
return false
}
</script>
</html>
以上是实现canvas雨滴效果的代码,如有问题请联系小编!