您现在的位置是:群英 > 开发技术 > web开发
用canvas怎么制作下雪效果,代码是什么
Admin发表于 2022-06-23 17:08:15623 次浏览
这篇文章主要给大家介绍“用canvas怎么制作下雪效果,代码是什么”的相关知识,下文通过实际案例向大家展示操作过程,内容简单清晰,易于学习,有这方面学习需要的朋友可以参考,希望这篇“用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);

完成,我们来看一下实际效果:

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

完整代码:

           <!DOCTYPE html>
<head>
  <style>
    body {
      background-color: #102a54;
    }
  </style>
</head>
<body>
  <canvas id='sky'></canvas>
  <script src="snow.js"></script>
</body>

</html>
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怎么制作下雪效果,代码是什么的内容应该都清楚了吧,希望大家阅读完这篇文章能有所收获。最后,想要了解更多用canvas怎么制作下雪效果,代码是什么的知识,欢迎关注群英网络,群英网络将为大家推送更多相关知识点的文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: canvas下雪效果
相关信息推荐
2022-07-06 17:41:32 
摘要:在并发编程中,多个Goroutine访问同一块内存资源时可能会出现竞态条件,我们需要在临界区中使用适当的同步操作来以避免竞态条件。Go 语言中提供了很多同步工具,本文将介绍互斥锁Mutex和读写锁RWMutex的使用方法。
2022-05-06 17:52:14 
摘要:这篇文章主要介绍了PHP中的8个魔术常量的使用方法,文中示例代码非常详细,帮助大家更好理解和学习,感兴趣的朋友可以了解下
2022-05-19 17:42:37 
摘要:go语言有框架,例如:Beego(Go语言下开源的,高性能Web框架 )、Buffalo(Go语言下快速Web开发框架)、Echo、Gin、Iris、Revel(高生产率,全栈Go语言的Web框架)等。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部