<form id="hz9zz"></form>
  • <form id="hz9zz"></form>

      <nobr id="hz9zz"></nobr>

      <form id="hz9zz"></form>

    1. 明輝手游網中心:是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺!

      html5完成下雪效果的方法

      [摘要]利用canvas,實現一個下雪的效果,我們先預覽下效果:我們先分析下這個效果:1,隨機產生雪花2,雪花的產生不是同時產生,而是有先后順序的3,雪花怎么表示4,怎么源源不斷的下雪5,雪花有大有小搞清楚上面幾個問題之后,這個效果基本上就實現了,首先,由于這個是全屏效果,我采用動態創建canvas,把整...
      利用canvas,實現一個下雪的效果,我們先預覽下效果:

      我們先分析下這個效果:

      1,隨機產生雪花

      2,雪花的產生不是同時產生,而是有先后順序的

      3,雪花怎么表示

      4,怎么源源不斷的下雪

      5,雪花有大有小

      搞清楚上面幾個問題之后,這個效果基本上就實現了,

      首先,由于這個是全屏效果,我采用動態創建canvas,把整個瀏覽器的寬與高賦值給canvas

      var Canvas = function (w, h) {
                      this.width = w;
                      this.height = h;
                  }
                  Canvas.prototype = {
                      init: function () {
                          var oC = document.createElement("canvas");
                          oC.setAttribute('width', this.width);
                          oC.setAttribute('height', this.height);
                          oC.setAttribute('id', 'canvas');
                          oC.style.backgroundColor = '#000';
                          document.body.appendChild(oC);
                      }
                  }
                  var curWinWidth = window.innerWidth,
                      curWinHeight = window.innerHeight;
                  var oCanvas = new Canvas(curWinWidth, curWinHeight);
                  oCanvas.init();

      調用oCanvas對象的init方法之后,就會在body的最后面追加一個canvas,id為canvas,寬、高與瀏覽器的寬、高相同,背景為黑色,晚上下雪的效果

      接下來,有了舞臺,演員該上場了,怎么產生雪花呢?這里把下雪相關的操作,封裝成一個類,他的基本結構如下:

      var Snow = function(){}
      Snow.prototype = {
        init : function(){},
        draw : function( cxt ) {},
        update : function(){}
      }

      這個類一共有三個方法( init, draw, update ).

      init:初始化雪花的位置( x, y 坐標 )、速度、半徑( 雪花的大小,在這里我們把雪花用半徑不同的圓表示 )

      function random(min, max) {
                      return Math.random() * (max - min) + min;
                  }
                  init: function () {
                          this.x = random(0, width);
                          this.y = 0;
                          this.r = random(1, 5);
                          this.vy = random(3, 5);
                      }

      那么init 加上 這個random函數 就可以完成雪花的初始化

      1,雪花出來的時候,一般是在屏幕的最上方出現的,所以雪花的y坐標都是0, 其次,雪花的x坐標是隨機的,他的范圍是從屏幕的左邊到右邊,那么就是 0 ~ width. 這個width就是canvas的寬度,也就是瀏覽器的寬度

      2,雪花的半徑r, 設置為1 ~ 5之間的任意值

      3,雪花下降的速度設置為3 ~ 5之間的隨機速度,這里我做的下雪是垂直方向往下飄,你可以拓展,考慮風力影響( 這個時候肯定有水平方向的速度 )

      有了這些初始化的參數之后,我們完善draw方法,繪制雪花:

      draw: function (cxt) {
                          cxt.beginPath();
                          cxt.fillStyle = 'white';
                          cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
                          cxt.fill();
                          cxt.closePath();
                          this.update(cxt);
                      },

      參數cxt就是canvas的上下文,這個函數很簡單,就是一個arc方法調用init中設置的值來畫圓(雪花),在該方法的最后調用了一個update方法,他是干嘛的?他是更新雪花在垂直方向的速度

      update: function (cxt) {
                          if (this.y < height - this.r) {
                              this.y += this.vy;
                          } else {
                              this.init();
                          }
                      }

      在update方法中,我們做了邊界判斷: 雪花往下飄落的時候,肯定會消失,消失之后怎么處理?沒有到達邊界怎么處理?

      canvas的高度減去雪花的半徑,這就是雪花要消失時候的邊界,所以this.y < height - this.r 如果這個條件成立,那么說明雪花一直在飄著,我們就要把雪花的y方向的位置更新,雪花看起來(‘正在下雪’),當一個雪花快要消失的時候,我們再把他移動到初始的位置,這樣看起來就是在圓圓不斷的下雪,而不需要重新繪制雪花(如果這樣做,肯定會影響性能,這個特效最后肯定會被卡死,這個小技巧很多類似的特效都會用到)。至此核心的流程已經搞定,接下來,我們就要大量的生成雪花了。

      var snow = [];
                  for (var i = 0; i < 500; i++) {
                      setTimeout(function () {
                          var oSnow = new Snow();
                          oSnow.init();
                          snow.push(oSnow);
                      }, 10 * i);
                  }

      生成500個雪花,不是同時生成的,然后把這些雪花保存到數組snow中.

      然后,開啟定時器,讓雪花不斷的飄落吧,

      關于requestAnimationFrame的使用,可以參考我的這篇文章:[js高手之路] html5新增的定時器requestAnimationFrame實戰進度條

      (function move() {
                      oGc.clearRect(0, 0, width, height);
                      for (var i = 0; i < snow.length; i++) {
                          snow[i].draw(oGc);
                      }
                      requestAnimationFrame(move);
                  })();

      完整的demo代碼:

      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>雪花效果 - by ghostwu</title>
          <!-- <script src="lib.js"></script> -->
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
      
              body {
                  overflow: hidden;
              }
          </style>
      </head>
      
      <body>
          <script>
              window.onload = function () {
                  var Canvas = function (w, h) {
                      this.width = w;
                      this.height = h;
                  }
                  Canvas.prototype = {
                      init: function () {
                          var oC = document.createElement("canvas");
                          oC.setAttribute('width', this.width);
                          oC.setAttribute('height', this.height);
                          oC.setAttribute('id', 'canvas');
                          oC.style.backgroundColor = '#000';
                          document.body.appendChild(oC);
                      }
                  }
                  var curWinWidth = window.innerWidth,
                      curWinHeight = window.innerHeight;
                  var oCanvas = new Canvas(curWinWidth, curWinHeight);
                  oCanvas.init();
      
                  var oC = document.querySelector('#canvas');
                  var width = oC.width, height = oC.height, oGc = oC.getContext('2d');
      
                  function random(min, max) {
                      return Math.random() * (max - min) + min;
                  }
                  var Snow = function () {
      
                  }
                  Snow.prototype = {
                      init: function () {
                          this.x = random(0, width);
                          this.y = 0;
                          this.r = random(1, 5);
                          this.vy = random(3, 5);
                      },
                      draw: function (cxt) {
                          cxt.beginPath();
                          cxt.fillStyle = 'white';
                          cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
                          cxt.fill();
                          cxt.closePath();
                          this.update(cxt);
                      },
                      update: function (cxt) {
                          if (this.y < height - this.r) {
                              this.y += this.vy;
                          } else {
                              this.init();
                          }
                      }
                  }
      
                  var snow = [];
                  for (var i = 0; i < 500; i++) {
                      setTimeout(function () {
                          var oSnow = new Snow();
                          oSnow.init();
                          snow.push(oSnow);
                      }, 10 * i);
                  }
      
                  (function move() {
                      oGc.clearRect(0, 0, width, height);
                      for (var i = 0; i < snow.length; i++) {
                          snow[i].draw(oGc);
                      }
                      requestAnimationFrame(move);
                  })();
              }
          </script>
      </body>

      以上就是html5實現下雪效果的方法 的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




      日韩精品一区二区三区高清