流星雨  

如何使用html实现流星雨的效果

  本篇文章给大家带来的内容是关于如何使用html实现流星雨的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
 
  
 
  
 
  
 
  
 
  
 
  
 
  <!doctypehtml>
 
  <html>
 
  <head>
 
  <metacharset="GB2312"/>
 
  <title>流星雨</title>
 
  <metaname="keywords"content="关键词,关键字">
 
  <metaname="description"content="描述信息">
 
  <style>
 
  body{
 
  margin:0;
 
  overflow:hidden;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <!--
 
  <canvas>画布画板画画的本子
 
  -->
 
  <canvaswidth=400height=400style="background:#000000;"id="canvas"></canvas>
 
  <!--
 
  javascript
 
  画笔
 
  -->
 
  <script>
 
  //获取画板
 
  //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<clos;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<clos;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);
 
  </script>
 
  </body>
 
  </html>





本文转载自中文网
 

推荐阅读