用canvas实现简单的下雪效果

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

<!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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

Python爬虫开发的3大难题,别上了贼船才发现,水有多深

写爬虫,是一个非常考验综合实力的活儿。有时候,你轻而易举地就抓取到了想要的数据;有时候,你费尽心思却毫无所获。

16920
来自专栏Web技术布道师

js 超过 java 成为最受欢迎的语言

HackerRank公司于近日发布了2019年度开发者技能报告,该报告的调查对象是7.1万名来自一百多个国家的软件开发者。现在每一个产业都需要软件开发者,因此对...

10650
来自专栏前端说吧

es6-开篇

相应的,后边推出的ES7、8、9、10等都依次是上一版本发出后一年的新迭代版本。不过很多仍是提案,并不被浏览器支持。

11520
来自专栏小勇DW3

Flume原理分析与使用案例

  flume是一个分布式、可靠、和高可用的海量日志采集、聚合和传输的系统。支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单...

35950
来自专栏技术探索

springboot logback(log4j) elk 非集群

好长时间没有写过blog了。抽时间把很久之前集成的一个简易的elk升级了下 本教程使用的软件如下: springboot 2.* jdk8 elk 6.2.4(...

16120
来自专栏程序猿声

关于微信公众号贴代码的方法

微信公众号码上贴代码一直一来都是个头疼的问题。吐槽一句:要是后台编辑器支持markdown就好了。

14210
来自专栏恰童鞋骚年

CanalSharp.AspNetCore v0.0.4-支持输出到MongoDB

  CanalSharp.AspNetCore是一个基于CanalSharp的适用于ASP.NET Core的一个后台任务组件,它可以随着ASP.NET Cor...

13520
来自专栏机器学习算法与Python学习

5 个Python高级应用,你确定知道?

Python 函数通常使用 def a_function_name() 样式来定义,但对于 lambda 函数,我们根本没为它命名。这是因为 lambda 函数...

7320
来自专栏纯洁的微笑

Java 并没有死!

我是一个从事Java / Scala / Groovy工作的家伙,这不是一个秘密。有些人,特别是年轻人,在听到这话时就会冲我翻白眼。

10830
来自专栏从零开始学自动化测试

python测试开发django-57.xadmin选项二级联动

当我们选择项目分类的时候,一个项目下关联多个模块,同时有这两个选项框的时候,需要实现选中一个项目,模块里面自动删除出该项目下的模块,如下图这种

23720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励