用canvas實現簡單的下雪效果

時間 2019-12-05

標籤 canvas 實現簡單下雪效果简体版

原文原文鏈接

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

<!DOCTYPE html>
<head>
  <style>
    body {
      background-color: #102a54;
    }
  </style>
</head>
<body>
  <canvas id='sky'></canvas>
  <script src="snow.js"></script>
</body>

</html>

canvas的操做將在頁面加載完以後執行，首先獲取到canvas的二維context，並將canvas寬高設置爲window的寬高，確保天空背景鋪滿整個窗口。 snow.js：canvas

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;
}

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

...
  
  var flakesCount = 100; // 雪花個數
  var flakes = [];

  for (var i = 0; i < flakesCount; i++) {
    flakes.push({
      x: Math.random() * W, // 雪花x軸位置
      y: Math.random() * H, // 雪花y軸位置
      r: Math.random() * 5 + 2, // 雪花的半徑
      d: Math.random() + 1 // 雪花密度，用於控制下落速度
    });
  }

接下來咱們須要將這100個雪花繪製出來，簡單起見，咱們就用一個個白色的小圓表示雪花：函數

function drawFlakes() {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    for (var i = 0; i < flakesCount; i++) {
      var flake = flakes[i];
      console.log(flake);
      ctx.moveTo(flake.x, flake.y);
      ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2, true);
    }
    ctx.fill();
    moveFlakes(); // todo: 雪花飄動效果
  }

雪花繪製完成後，咱們須要讓雪花動起來，有飄落的效果。咱們思路是設置一個定時器，每隔25ms從新渲染一次canvas，每次渲染每一個雪花往下移動一段距離，雪花密度越大下落速度越快。而且經過Math.sin函數營造出雪花左右飄動的效果，當雪花落到窗口外面後將雪花從新移動到窗口上方再次下落，實現以下：spa

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);

完成，咱們來看一下實際效果：code