小编给大家分享一下怎么用html实现流星雨的效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司是一家专业提供萧山企业网站建设,专注与成都网站设计、网站建设、html5、小程序制作等业务。10年已为萧山众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
body{
margin:0;
overflow:hidden;
}
//获取画板
//doccument当前文档
//getElement获取一个标签
//ById通过Id名称的方式
//var声明一片空间
//varcanvas声明一片空间的名字叫做canvas
varcanvas=document.getElementById("canvas");
//获取画板权限上下文
varctx=canvas.getContext("2d");
//让画板的大小等于屏幕的大小
/*
思路:
1.获取屏幕对象
2.获取屏幕的尺寸
3.屏幕的尺寸赋值给画板
*/
//获取屏幕对象
vars=window.screen;
//获取屏幕的宽度和高度
varw=s.width;
varh=s.height;
//设置画板的大小
canvas.width=w;
canvas.height=h;
//设置文字大小
varfontSize=14;
//计算一行有多少个文字取整数向下取整
varclos=Math.floor(w/fontSize);
//思考每一个字的坐标
//创建数组把clos个0(y坐标存储起来)
vardrops=[];
varstr="qwertyuiopasdfghjklzxcvbnm";
//往数组里面添加clos个0
for(vari=0;i drops.push(0); } //绘制文字 functiondrawString(){ //给矩形设置填充色 ctx.fillStyle="rgba(0,0,0,0.05)" //绘制一个矩形 ctx.fillRect(0,0,w,h); //添加文字样式 ctx.font="600"+fontSize+"px微软雅黑"; //设置文字颜色 ctx.fillStyle="#ff2d2d"; for(vari=0;i //x坐标 varx=i*fontSize; //y坐标 vary=drops[i]*fontSize; //设置绘制文字 ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y); if(y>h&&Math.random()>0.99){ drops[i]=0; } drops[i]++; } } //定义一个定时器,每隔30毫秒执行一次 setInterval(drawString,30); 以上是“怎么用html实现流星雨的效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前名称:怎么用html实现流星雨的效果
标题路径:http://cdxtjz.com/article/ihecsd.html