怎么用canvas实现简单的下雪效果-创新互联

这篇文章将为大家详细讲解有关怎么用canvas实现简单的下雪效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联服务项目包括乐安网站建设、乐安网站制作、乐安网页制作以及乐安网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，乐安网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到乐安省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

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 < 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函数营造出雪花左右飘动的效果，当雪花落到窗口外面后将雪花重新移动到窗口上方再次下落，实现如下：

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

完成，我们来看一下实际效果：

嗯，还挺像那么回事儿:)

完整代码：

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实现简单的下雪效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：怎么用canvas实现简单的下雪效果-创新互联
文章地址：http://6mz.cn/article/ceeieg.html