JS怎麼做雪花飄落動畫-js教程-PHP中文網

首頁

web前端

js教程

JS怎麼做雪花飄落動畫

php中世界最好的语言

May 14, 2018 am 11:32 AM

javascript 動畫

這次帶給大家JS怎麼做出雪花飄落動畫，JS做出雪花飄落動畫的注意事項有哪些，下面就是實戰案例，一起來看一下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> JS下雪动画</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
  .masthead {
    background-color:#333;
    display:block;
    width:100%;
    height:400px;
  }
</style>
<body>
<p class="masthead"></p>
<script>
  (function () {
    var COUNT = 300;
    var masthead = document.querySelector('.masthead');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var width = masthead.clientWidth;
    var height = masthead.clientHeight;
    var i = 0;
    var active = false;
    function onResize() {
      width = masthead.clientWidth;
      height = masthead.clientHeight;
      canvas.width = width;
      canvas.height = height;
      ctx.fillStyle = '#FFF';
      var wasActive = active;
      active = width > 600;
      if (!wasActive && active)
        requestAnimFrame(update);
    }
    var Snowflake = function () {
      this.x = 0;
      this.y = 0;
      this.vy = 0;
      this.vx = 0;
      this.r = 0;
      this.reset();
    };
    Snowflake.prototype.reset = function() {
      this.x = Math.random() * width;
      this.y = Math.random() * -height;
      this.vy = 1 + Math.random() * 3;
      this.vx = 0.5 - Math.random();
      this.r = 1 + Math.random() * 2;
      this.o = 0.5 + Math.random() * 0.5;
    };
    canvas.style.position = 'absolute';
    canvas.style.left = canvas.style.top = '0';
    var snowflakes = [], snowflake;
    for (i = 0; i < COUNT; i++) {
      snowflake = new Snowflake();
      snowflakes.push(snowflake);
    }
    function update() {
      ctx.clearRect(0, 0, width, height);
      if (!active)
        return;
      for (i = 0; i < COUNT; i++) {
        snowflake = snowflakes[i];
        snowflake.y += snowflake.vy;
        snowflake.x += snowflake.vx;
        ctx.globalAlpha = snowflake.o;
        ctx.beginPath();
        ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
        if (snowflake.y > height) {
          snowflake.reset();
        }
      }
      requestAnimFrame(update);
    }
    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
      return window.requestAnimationFrame    ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame  ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
    })();
    onResize();
    window.addEventListener('resize', onResize, false);
    masthead.appendChild(canvas);
  })();
</script></body></html>

登入後複製

使用本站HTML/CSS/JS線上執行測試工具：http://tools.jb51.net/code/HtmlJsRun，可以下測試運行效果：

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7543

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

動畫不工作在PowerPoint中[修復] Feb 19, 2024 am 11:12 AM

您是否正在嘗試製作演示文稿，但無法添加動畫？如果動畫在你的WindowsPC上的PowerPoint中不起作用，那麼這篇文章將會幫助你。這是一個常見的問題，許多人都在抱怨。例如，在Microsoft團隊中演示或在螢幕錄製期間，動畫可能會停止運作。在本指南中，我們將探索各種故障排除技術，以協助您修復在Windows上的PowerPoint中無法運作的動畫。為什麼我的PowerPoint動畫不起作用？我們注意到Windows上PowerPoint中的動畫可能無法運作問題的一些可能原因如下：由於個

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

ppt動畫如何設定先進入再退出 Mar 20, 2024 am 09:30 AM

我們在日常的辦公中常常會使用到ppt，那麼你是否對ppt裡邊的每個操作功能都很了解呢？例如：ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少？每個投影片能不能自動播放、ppt動畫先進入再退出等等，那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟，就在下方，小伙伴們快來看一看吧！ 1.首先，我們在電腦中開啟ppt，點選文字方塊外側選取文字框，（如下圖紅色圈出部分所示）。 2.然後，點選選單列中的【動畫】，選取【擦除】的效果，（如圖紅色圈出部分所示）。 3.接下來，點擊【

跳票 2 年，國產 3D 動畫電影《二郎神之深海蛟龍》定檔 7 月 13 日 Jan 26, 2024 am 09:42 AM

本站1月26日消息，國產3D動畫電影《二郎神之深海蛟龍》發布一組最新劇照，正式宣布將於7月13日上映。據了解，《二郎神之深海蛟龍》是由迷狐星（北京）動漫有限公司、霍爾果斯眾合千澄影業有限公司、浙江橫店影業有限公司、浙江共贏影業有限公司、成都天火科技有限公司、華文映像（北京）影業有限公司出品，王君執導的動畫電影，原定2022年7月22日在中國大陸上映。本站劇情簡介：封神之戰後，姜子牙攜「封神榜」分封諸神，而後封神榜被天庭封印於九州祕境深海之下。事實上，除了分封神位，封神榜中還封緘著眾多強大的妖邪元

宮崎駿動畫電影《紅豬》延長上映至明年 1 月 16 日，豆瓣 8.6 分 Dec 18, 2023 am 08:07 AM

本站消息，宮崎駿動畫電影《紅豬》宣布將上映時間延長至2024年1月16日本站先前報道，《紅豬》已於11月17日登陸全國藝聯專線影院，累計票房超2000萬，豆瓣評分8.6分，4、5星好評佔85.8%。《紅豬》由吉卜力工作室製作，宮崎駿執導，森山週一郎、加藤登紀子、大塚明夫、岡村明美等參與配音，最初於1992年在日本上映。該片改編自宮崎駿漫畫作品《飛行艇時代》，講述了義大利空軍的王牌飛行員波魯克・羅森被施了魔法變成了一頭豬。之後，他成為了一位賞金獵人，打擊空中劫匪，保護身邊人。劇情簡介：羅森是一戰中

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

See all articles

JS怎麼做雪花飄落動畫

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題