用canvas实现简单的下雪效果

Profeel 发布于2019-08-05 18:08 / 1212人阅读

摘要：并且通过函数营造出雪花左右飘动的效果，当雪花落到窗口外面后将雪花重新移动到窗口上方再次下落，实现如下速度和密度实际上不是平方的关系，这么些是为了效果更加错落有致完成，我们来看一下实际效果也可以去看看嗯，还挺像那么回事儿

首先新建一个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);

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

也可以去codepen看看：Snowing with canvas

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

超融合服务器混合云用c实现简单的shell java实现下雪场景 js实现的简单特效 js实现f11的效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60591.html

用canvas实现简单的下雪效果

摘要：并且通过函数营造出雪花左右飘动的效果，当雪花落到窗口外面后将雪花重新移动到窗口上方再次下落，实现如下速度和密度实际上不是平方的关系，这么些是为了效果更加错落有致完成，我们来看一下实际效果也可以去看看嗯，还挺像那么回事儿首先新建一个html文件，将body的背景设置为天空的那种深蓝色，并创建一个canvas，canvas的操作逻辑都放在snow.js中： body {...

U2FsdGVkX1x 2019-08-02 12:02 评论0 收藏0
用canvas实现简单的下雪效果

摘要：并且通过函数营造出雪花左右飘动的效果，当雪花落到窗口外面后将雪花重新移动到窗口上方再次下落，实现如下速度和密度实际上不是平方的关系，这么些是为了效果更加错落有致完成，我们来看一下实际效果也可以去看看嗯，还挺像那么回事儿首先新建一个html文件，将body的背景设置为天空的那种深蓝色，并创建一个canvas，canvas的操作逻辑都放在snow.js中： body {...

paney129 2019-08-26 12:24 评论0 收藏0
自定义view控件效果实现及实践

摘要：项目需求讨论自定义实现步骤及封装根据实际项目需求出发。自定义控件之带下载进度的下载按钮最近要用到一个带下载进度的按钮，各种搜索了一波，很抱歉，实在没有发现自己想要的效果，没办法只能自己尝试实现了一个了。项目需求讨论 - Android 自定义 Dialog 实现步骤及封装根据实际项目需求出发。因为项目中的对话框要配合整个项目的 UI 风格，所以进行自定义 Dialog 的实现步骤，...

shiweifu 2019-06-25 11:47 评论0 收藏0
圣诞节快乐 | 圣诞特效来了！！

摘要：圣诞节又称耶诞节耶稣诞辰，译名为基督弥撒，是西方传统节日，起源于基督教，在每年公历月日。仿圣诞节京东抽奖仿圣诞节京东抽奖活动页面，老虎机转动抽奖圣诞节下雪动画圣诞节下雪动画效果 showImg(https://segmentfault.com/img/bVblFYh?w=718&h=644);圣诞节（Christmas）又称耶诞节、耶稣诞辰，译名为基督弥撒，是西方传统节日，起源于基督教...

xiongzenghui 2019-08-23 14:18 评论0 收藏0
慕课网_《模式的秘密之观察者模式》学习总结

摘要：时间年月日星期二说明本文部分内容均来自慕课网。慕课网教学源码学习源码第一章观察者模式概述课程简介观察者模式的定义定义对象间的一种一对多的依赖关系。时间：2017年08月29日星期二说明：本文部分内容均来自慕课网。@慕课网：http://www.imooc.com教学源码：https://github.com/zccodere/s...学习源码：https://github.com/z...

iKcamp 2019-08-16 10:42 评论0 收藏0