用canvas實現簡單的下雪效果（附程式碼）-H5教程-PHP中文網

用canvas實現簡單的下雪效果（附程式碼）

不言

發布： 2018-11-16 17:06:23

轉載

3109 人瀏覽過

這篇文章帶給大家的內容是關於用canvas實現簡單的下雪效果（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

首先新建一個html文件，將body的背景設定為天空的那種深藍色，並創建一個canvas，canvas的操作邏輯都放在snow.js中：

nbsp;html>

登入後複製

canvas的操作將在頁面載入後執行，首先取得到canvas的二維context，並將canvas寬高設定為window的寬高，確保天空背景鋪滿整個視窗。 snow.js：

window.onload = function () {
  var canvas = document.getElementById('sky');
  var ctx = canvas.getContext('2d');

  var W = window.innerWidth;
  var H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;
}

登入後複製

天空背景完成後，我們來創建雪花，思路比較簡單，我們讓屏幕上保持一個額定數量的雪花，並給每個雪花一個隨機的位置、隨機的大小以及隨機的下落速度：

  ...
  
  var flakesCount = 100; // 雪花个数
  var flakes = [];

  for (var i = 0; i 接下來我們需要將這100個雪花繪製出來，簡單起見，我們就用一個個白色的小圓表示雪花：
  function drawFlakes() {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    for (var i = 0; i 雪花繪製完成後，我們需要讓雪花動起來，有飄落的效果。我們想法是設定一個定時器，每隔25ms重新渲染一次canvas，每次渲染每個雪花往下移動一段距離，雪花密度越大下落速度越快。並且透過Math.sin函數營造出雪花左右飄動的效果，當雪花落到視窗外面後將雪花重新移動到視窗上方再次下落，實現如下：
  var angle = 0;

  function moveFlakes() {
    angle += 0.01;
    for (var i = 0; i  H) {
        flakes[i] = { x: Math.random() * W, y: 0, r: flake.r, d: flake.d };
      }
    }
  }

  setInterval(drawFlakes, 25);
登入後複製

完成，我們來看看實際效果：

用canvas實現簡單的下雪效果（附程式碼）

嗯，還蠻像那麼一回事:)

############### ############完整程式碼：###

登入後複製

window.onload = function () {
  // get the canvas and context
  var canvas = document.getElementById('sky');
  var ctx = canvas.getContext('2d');

  // set canvas dims to window height and width
  var W = window.innerWidth;
  var H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;

  // generate snowflakes and apply attributes
  var flakesCount = 100;
  var flakes = []; // flake instances

  // loop through the empty flakes and apply attributes
  for (var i = 0; i < flakesCount; i++) {
    flakes.push({
      x: Math.random() * W,
      y: Math.random() * H,
      r: Math.random() * 5 + 2, // 2px - 7px
      d: Math.random() + 1
    });
  }

  // draw flakes onto canvas
  function drawFlakes() {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    for (var i = 0; i < flakesCount; i++) {
      var flake = flakes[i];
      ctx.moveTo(flake.x, flake.y);
      ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2, true);
    }
    ctx.fill();
    moveFlakes();
  }

  var angle = 0;

  function moveFlakes() {
    angle += 0.01;
    for (var i = 0; i < flakesCount; i++) {
      var flake = flakes[i];
      flake.y += Math.pow(flake.d, 2) + 1;
      flake.x += Math.sin(angle) * 2;

      if (flake.y > H) {
        flakes[i] = { x: Math.random() * W, y: 0, r: flake.r, d: flake.d };
      }
    }
  }

  setInterval(drawFlakes, 25);
}

登入後複製

######

以上是用canvas實現簡單的下雪效果（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！