快捷導(dǎo)航

JS實(shí)現(xiàn)的雪花飄落特效示例

更新時(shí)間：2019年12月03日 10:42:58 作者：陳柴Rarin

這篇文章主要介紹了JS實(shí)現(xiàn)的雪花飄落特效,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的雪花飄落特效。分享給大家供大家參考，具體如下：

首先我們要?jiǎng)?chuàng)建一個(gè)HTML文件，將其命名為index.html

<!DOCTYPE html>
<html>
<head>
 <title> Canvas - 雪花特效 </title>
 <meta charset="utf-8">
 <style>
 *{
  margin:0px;
  padding:0px;
 }
 .myCanvas{
  float:left;
  background:rgba(0,0,0,0);
 }
 </style>
</head>
<body>
 <canvas id="myCanvas" class="myCanvas"> </canvas>
</body>
</html>

在上面的代碼中，我們創(chuàng)建了一個(gè)canvas畫布，并且設(shè)置他為浮動(dòng)，背景色無(wú)（如果這里不設(shè)置浮動(dòng)，那么等下獲取整個(gè)屏幕的大小賦給他的時(shí)候是會(huì)產(chǎn)生邊距的）

接下來(lái)的JavaScript代碼

<script>
 //獲取屏幕最大長(zhǎng)寬
  var maxWidth = document.documentElement.clientWidth;
  var maxHeight = document.documentElement.clientHeight;
  //獲取canvas畫布
  var canvasObj = document.getElementById('myCanvas');
  //將屏幕的長(zhǎng)寬賦給畫布
  canvasObj.width = maxWidth;
  canvasObj.height = maxHeight;
  //創(chuàng)建雪花圖形(白色的圓形)
  var cxt = canvasObj.getContext('2d');
  //設(shè)置雪花的個(gè)數(shù)
  var snowCount = 1000;
  var objArray = [];
  for(var index = 0;index < snowCount; index++){
   objArray.push({
     //隨機(jī)x軸位置
     x : Math.random()*maxWidth,
     //隨機(jī)y軸位置
     y : Math.random()*maxHeight,
     //隨機(jī)半徑大小
     r : Math.random()*4+1,
     //畫圓
     drow : function() {
     cxt.beginPath();
       //填充色
       cxt.fillstyle = "#fff";
       //填充
       cxt.fill();
       //圓的屬性
       cxt.arc(this.x,this.y,this.r,0,2*Math.PI);
       //輸出圓
       cxt.stroke();
     }
  });
 }
  function drawSnow() {
   cxt.clearRect(0,0,maxWidth,maxHeight)
    //清除0x軸，0y軸，最大屏幕x軸，最大屏幕y軸的圓形
    for(var index = 0; index<objArray.length; index++) {
     //把每個(gè)圓都畫出來(lái)
      objArray[index].drow();
    }
    downLoadSnow()
    //調(diào)用雪花移動(dòng)效果
  }
  function downLoadSnow() {
   for(var index = 0;index<objArray.length;index++){
     if(objArray[index].x > maxWidth) {
       objArray[index].x = 0;
        //當(dāng)移動(dòng)的位置大于最大屏幕寬度時(shí)返回到0
       } else {
        objArray[index].x +=5;
         //否則一直加下去
       }
       if(objArray[index].y > maxHeight) {
         objArray[index].y = 0;
         //當(dāng)移動(dòng)的位置大于最大屏幕高度時(shí)返回0
       } else {
         objArray[index].y +=5;
         //否則一直加下去
       }
     }
  }
 setInterval("drawSnow()",30);
 //調(diào)用計(jì)時(shí)器
</script>

到此雪花落下的結(jié)果就已經(jīng)實(shí)現(xiàn)了

這里使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun測(cè)試上述代碼，可得如下運(yùn)行效果：