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

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

用canvas实现简单的下雪效果的更多相关文章

  1. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...

  2. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...

  3. canvas绘制简单的霓虹灯效果

    canvas简单动画分为三个步骤: 1.清除画布区域的内容: 2.重绘: 3.执行requestAnimationFrame(); 这个霓虹灯效果的demo,我没有用requestAnimationF ...

  4. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

  5. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  6. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  7. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  8. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  9. html5 canvas 一个漫天飞雪的效果

    很棒的下雪效果 代码奉上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

随机推荐

  1. 迅为iTOP-3399开发板Ubuntu基本设置

    基于迅为iTOP3399开发板虚拟机需要根据用户的实际情况,进行网络设置以及其他一些基本的设置.VMware10.0.1 和 Vmware8.0.3 联网和基本设置类似.下面先详细讲解一下,虚拟机的一 ...

  2. C++ sizeof 运算符

    sizeof 是一个关键字,它是一个编译时运算符,用于判断变量或数据类型的字节大小. sizeof 运算符可用于获取类.结构.共用体和其他用户自定义数据类型的大小. 使用 sizeof 的语法如下: ...

  3. Docker系列四: 使用UI管理docker容器

    一.什么是Portainer? Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容 ...

  4. Java程序员常用Linux性能分析命令

    性能分析 vmstat 虚拟内存统计 用法 Usage: vmstat [options] [delay [count]] Options: -a, --active active/inactive ...

  5. php中级程序员的进化标准

    1 熟悉linux/unix操作系统,能够写些shell脚本2 能够搭建lamp环境3 熟练使用php,了解或使用过php扩展模块,使用过开源的php框架4 熟悉缓存技术,包括http协议的缓存,利用 ...

  6. 75）PHP，session在使用时的一些语法问题

    (1)cookie仅能存字符串类型,但是session能存任何数据类型,比如: 然后我在session_2.php中输出这个session_1.php的数据: 结果展示: 我得在浏览器的地址栏中先请求 ...

  7. http接口与webservice接口的区别

    常见的API接口有两类:http接口和webservice接口. http接口走http协议,通过路径来区分调用方法,请求报文一般是key-value形式的,返回报文一般是json串,常用的是get和 ...

  8. JAVA异常处理原则和log4j输出详细异常分析

    1.多用try,catch;不要一个try,catch包含所有内容 好处:不同模块抓取不同异常,某一模块异常挂了,不影响其他模块的程序的进行 2.多写几个catche:尽量不要使用Exception这 ...

  9. 微信发送朋友圈URL JSAPI事件demo

    <script> var imgUrl = 'http://m.ximiyu.com/content/images/thumbs/0000126_540.jpeg'; var lineLi ...

  10. a, b = a, a+b 和a=b b=a+b的区别

    n,a,b=0,0,1 while n<5: print(b) a,b=b,a+b n=n+1 和 n,a,b=0,0,1 while n<5: print(b) a=b b=a+b n= ...