用canvas實(shí)現(xiàn)簡(jiǎn)單的下雪效果

paney129 發(fā)布于2019-08-26 12:24 / 570人閱讀

摘要：并且通過函數(shù)營(yíng)造出雪花左右飄動(dòng)的效果，當(dāng)雪花落到窗口外面后將雪花重新移動(dòng)到窗口上方再次下落，實(shí)現(xiàn)如下速度和密度實(shí)際上不是平方的關(guān)系，這么些是為了效果更加錯(cuò)落有致完成，我們來看一下實(shí)際效果也可以去看看嗯，還挺像那么回事兒

首先新建一個(gè)html文件，將body的背景設(shè)置為天空的那種深藍(lán)色，并創(chuàng)建一個(gè)canvas，canvas的操作邏輯都放在snow.js中：

canvas的操作將在頁面加載完之后執(zhí)行，首先獲取到canvas的二維context，并將canvas寬高設(shè)置為window的寬高，確保天空背景鋪滿整個(gè)窗口。 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;
}

天空背景完成后，我們來創(chuàng)建雪花，思路比較簡(jiǎn)單，我們讓屏幕上保持一個(gè)額定數(shù)量的雪花，并給每個(gè)雪花一個(gè)隨機(jī)的位置、隨機(jī)的大小以及隨機(jī)的下落速度：

  ...
  
  var flakesCount = 100; // 雪花個(gè)數(shù)
  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個(gè)雪花繪制出來，簡(jiǎn)單起見，我們就用一個(gè)個(gè)白色的小圓表示雪花：

  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: 雪花飄動(dòng)效果
  }

雪花繪制完成后，我們需要讓雪花動(dòng)起來，有飄落的效果。我們思路是設(shè)置一個(gè)定時(shí)器，每隔25ms重新渲染一次canvas，每次渲染每個(gè)雪花往下移動(dòng)一段距離，雪花密度越大下落速度越快。并且通過Math.sin函數(shù)營(yíng)造出雪花左右飄動(dòng)的效果，當(dāng)雪花落到窗口外面后將雪花重新移動(dòng)到窗口上方再次下落，實(shí)現(xiàn)如下：

  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; // 速度和密度實(shí)際上不是平方的關(guān)系，這么些是為了效果更加錯(cuò)落有致
      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);

完成，我們來看一下實(shí)際效果：

也可以去codepen看看：Snowing with canvas

嗯，還挺像那么回事兒:)

云服務(wù)器 GPU云服務(wù)器用c實(shí)現(xiàn)簡(jiǎn)單的shell java實(shí)現(xiàn)下雪場(chǎng)景 js實(shí)現(xiàn)的簡(jiǎn)單特效 js實(shí)現(xiàn)f11的效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108629.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

paney129

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤點(diǎn)#劍指 Offer 07. 重建二叉樹

閱讀 3340·2021-11-24 09:39
2021愛智先行者—（2）零基礎(chǔ)APP開發(fā)實(shí)例

閱讀 3913·2021-11-22 09:34
聯(lián)通AS9929 + AS10099 VPS商家匯總 – 線路堪比CN2 GIA

閱讀 4877·2021-08-11 11:17
用兩種不同的姿勢(shì)來實(shí)現(xiàn)拖動(dòng)排序

閱讀 1093·2019-08-29 13:58
CSS進(jìn)階篇--fontAwesome代替網(wǎng)頁icon小圖標(biāo)

閱讀 2623·2019-08-28 18:18
用canvas實(shí)現(xiàn)簡(jiǎn)單的下雪效果

閱讀 571·2019-08-26 12:24
FabricJS 前端繪圖庫使用總結(jié)(一)

閱讀 863·2019-08-26 12:14
移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)）

閱讀 768·2019-08-26 11:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

用canvas實(shí)現(xiàn)簡(jiǎn)單的下雪效果

相關(guān)文章