JS實現的雪花飄落特效示例

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

這篇文章主要介紹了JS實現的雪花飄落特效,結合實例形式詳細分析了JavaScript結合時間函數動態(tài)操作頁面元素的相關實現技巧,需要的朋友可以參考下

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

首先我們要創(chuàng)建一個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)建了一個canvas畫布，并且設置他為浮動，背景色無（如果這里不設置浮動，那么等下獲取整個屏幕的大小賦給他的時候是會產生邊距的）

接下來的JavaScript代碼

<script>
 //獲取屏幕最大長寬
  var maxWidth = document.documentElement.clientWidth;
  var maxHeight = document.documentElement.clientHeight;
  //獲取canvas畫布
  var canvasObj = document.getElementById('myCanvas');
  //將屏幕的長寬賦給畫布
  canvasObj.width = maxWidth;
  canvasObj.height = maxHeight;
  //創(chuàng)建雪花圖形(白色的圓形)
  var cxt = canvasObj.getContext('2d');
  //設置雪花的個數
  var snowCount = 1000;
  var objArray = [];
  for(var index = 0;index < snowCount; index++){
   objArray.push({
     //隨機x軸位置
     x : Math.random()*maxWidth,
     //隨機y軸位置
     y : Math.random()*maxHeight,
     //隨機半徑大小
     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++) {
     //把每個圓都畫出來
      objArray[index].drow();
    }
    downLoadSnow()
    //調用雪花移動效果
  }
  function downLoadSnow() {
   for(var index = 0;index<objArray.length;index++){
     if(objArray[index].x > maxWidth) {
       objArray[index].x = 0;
        //當移動的位置大于最大屏幕寬度時返回到0
       } else {
        objArray[index].x +=5;
         //否則一直加下去
       }
       if(objArray[index].y > maxHeight) {
         objArray[index].y = 0;
         //當移動的位置大于最大屏幕高度時返回0
       } else {
         objArray[index].y +=5;
         //否則一直加下去
       }
     }
  }
 setInterval("drawSnow()",30);
 //調用計時器
</script>

到此雪花落下的結果就已經實現了

這里使用在線HTML/CSS/JavaScript前端代碼調試運行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼，可得如下運行效果：