成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

paney129 / 615人閱讀

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

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

canvas的操作將在頁面加載完之后執(zhí)行，首先獲取到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;
}

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

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

  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函數(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; // 速度和密度實際上不是平方的關系，這么些是為了效果更加錯落有致
      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

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

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

轉載請注明本文地址：http://m.hztianpu.com/yun/108629.html

相關文章

  • 用canvas實現(xiàn)簡單的下雪效果

    摘要：并且通過函數(shù)營造出雪花左右飄動的效果，當雪花落到窗口外面后將雪花重新移動到窗口上方再次下落，實現(xiàn)如下速度和密度實際上不是平方的關系，這么些是為了效果更加錯落有致完成，我們來看一下實際效果也可以去看看嗯，還挺像那么回事兒 首先新建一個html文件，將body的背景設置為天空的那種深藍色，并創(chuàng)建一個canvas，canvas的操作邏輯都放在snow.js中： body {...

    U2FsdGVkX1x 評論0 收藏0

  • 圣誕節(jié)快樂 | 圣誕特效來了！！

    摘要：圣誕節(jié)又稱耶誕節(jié)耶穌誕辰，譯名為基督彌撒，是西方傳統(tǒng)節(jié)日，起源于基督教，在每年公歷月日。仿圣誕節(jié)京東抽獎仿圣誕節(jié)京東抽獎活動頁面，老虎機轉動抽獎圣誕節(jié)下雪動畫圣誕節(jié)下雪動畫效果 showImg(https://segmentfault.com/img/bVblFYh?w=718&h=644);圣誕節(jié)（Christmas）又稱耶誕節(jié)、耶穌誕辰，譯名為基督彌撒，是西方傳統(tǒng)節(jié)日，起源于基督教...

    xiongzenghui 評論0 收藏0

  • 慕課網(wǎng)_《模式的秘密之觀察者模式》學習總結

    摘要：時間年月日星期二說明本文部分內容均來自慕課網(wǎng)。慕課網(wǎng)教學源碼學習源碼第一章觀察者模式概述課程簡介觀察者模式的定義定義對象間的一種一對多的依賴關系。 時間：2017年08月29日星期二說明：本文部分內容均來自慕課網(wǎng)。@慕課網(wǎng)：http://www.imooc.com教學源碼：https://github.com/zccodere/s...學習源碼：https://github.com/z...

    iKcamp 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<