hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

用canvas完成简朴的下雪结果(附代码)【html5教程】

2019-11-26HTML搜搜PHP网72°c
A+ A-
本篇文章给人人带来的内容是关于用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完成简朴的下雪结果(附代码)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
用canvas完成简朴的下雪结果(附代码)【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章