用canvas实现简单的下雪效果（附代码）-

首先新建一个html文件，将body的背景设置为天空的那种深蓝色，并创建一个canvas，canvas的操作逻辑都放在snow.js中：

canvas的操作将在页面加载完之后执行，首先获取到canvas的二维context，并将canvas宽高设置为window的宽高，确保天空背景铺满整个窗口。 snow.js：

window.Onload= function () {
  var canvas = document.getElementById(&＃39;sky&＃39;);
  var ctx = canvas.getContext(&＃39;2d&＃39;);

  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 = &＃39;#fff&＃39;;
    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);
完成，我们来看一下实际效果：
嗯，还挺像那么回事儿:)
完整代码：
           

  


  
  


window.Onload= function () {
  // get the canvas and context
  var canvas = document.getElementById(&＃39;sky&＃39;);
  var ctx = canvas.getContext(&＃39;2d&＃39;);

  // 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  H) {
        flakes[i] = { x: Math.random() * W, y: 0, r: flake.r, d: flake.d };
      }
    }
  }

  setInterval(drawFlakes, 25);
}
以上就是用canvas实现简单的下雪效果（附代码）的详细内容，更多请关注 第一PHP社区 其它相关文章！