canvas实现雨滴效果

最新推荐文章于 2022-11-14 08:25:08 发布

码农的N次方

最新推荐文章于 2022-11-14 08:25:08 发布

阅读量494

点赞数

分类专栏： canvas 文章标签： html javascript 实例

本文链接：https://blog.csdn.net/qq_38384536/article/details/73813850

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="c"></canvas>
<script>
var c=document.getElementById("c");
var ctx=c.getContext("2d");
c.width=window.innerWidth;
c.height=window.innerHeight;
// ctx.fillRect(0,0,100,100);
// a,b,c,d分别代表x方向偏移,y方向偏移,宽，高
var string1 = "abcdefghijklmnopqrstuvwxyz";
string1.split(""); //将string1分割为数组
var fontsize=20;
columns=c.width/fontsize;
//看一共有多少列
var drop = []; //定义一个空数组
for(var x=0;x<columns;x++)
{
drop[x]=0; //初始化每一列的每一项
}
function drap(){
ctx.fillStyle="rgba(0,0,0,0.07)";
ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle="#0F0";
ctx.font=fontsize+"px arial";
for(var i=0;i<drop.length;i++){
var text1=string1[Math.floor(Math.random()*string1.length)];
ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
drop[i]++;
if(drop[i]*fontsize>c.height&&Math.random()>0.9){//90%的几率掉落
drop[i]=0;
}
}
}
setInterval(drap,30);
</script>
</body>
</html>