八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果

2021-01-21 開源中國

HTML5、WebGL和JavaScript改變了長久以來的動畫製作行業。在過去的幾年中，我們想要製作卓越的網頁動畫只能使用Flash和Java Applet。而現在，使用腳本語言和渲染器在瀏覽器中實現瘋狂的動畫效果已經成為可能。究其原因，大概有以下幾點：

處理器的性能越來越高。我們的電腦已經有足夠的強大的能力去渲染最為複雜的動畫效果。 現在瀏覽器和web技術的不斷發展。瀏覽器如Firefox、Chrome、Safari和IE10，web技術如Canvas、SVG和WebGL。 網速越來越快。一些體驗需要實時數據流和預加載資源，更好的網絡狀況能有更好的體驗。

我們挑選了8個由WebGL、HTML5 Canvas和Javascript製作的絕妙效果。每一個都非常簡單但卻發人深省，瘋狂並且極具創意。

黏糊糊的東西

用滑鼠拖拽，然後扔出去，就會粘在網頁邊緣。

粒子動畫

使用浮點紋理和FBO來實現的動畫，由粒子組成一匹奔跑的駿馬。

三維液體

用3D的方式呈現經典的2D水面效果算法。

章魚

WebGL和Three.js製作的漂亮的章魚狀的星空動畫

蠕蟲

HTML5 Canvas製作的效果，無數條蠕蟲根據灰度組成圖片，你還可以拖拽一張本地圖片到右側。

瘋狂的觸角

隨機視覺

Conductor

將紐約地鐵系統變成可以彈奏的弦樂器。

原文地址：http://favbulous.com/post/895/8-crazy-animations-withwebgl-and-html5-canvas
文/hiwebgl

相關焦點

  • HTML 5 Canvas 遞歸畫樹
    同樣必須要有html容器。新建Index.html，代碼如下:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>canvas tree</title> </head> <body> <script
  • html5 canvas畫布繪製矩形和圓形
    html5為我們提供了非常有特色的標籤，canvas標籤為我們可以實現在網頁中畫畫提供了便利，接下來我們列舉他的常用操作。新建一個html5的文檔，建立一個canvas畫布，設置長寬，這裡需要特別注意，canvas標籤可以在標籤內設置width,height,也能通過css來設置，但是通過css來設置的標籤，當繪製圖形的時候會變形，所以我們建議直接在標籤內設置。
  • WebGL 入門-原生API介紹
    要把WebGL繪製到頁面上，通常需要執行如下工作：1.創建畫布元素2.獲取呈現上下文3.初始化視口4.創建頂點數組5.創建矩陣6.加載著色器7.繪製創建畫布元素並獲取上下文WebGL當前，大部分瀏覽器都使用語法 canvas.getContext("experimental-webgl") 來獲取 WebGLRenderingContext。
  • 用HTML5把Canvas緩衝區內容輸出到屏幕
    我會儘量簡要說明如何使用HTML5 canvas元素和JavaScript創建簡單的遊戲。本教程將省略一些代碼，但絕非故意。您可以隨時查看我的遊戲演示。　　HTML5有許多的神奇功能，諸如:　　畫布元素　　視頻和音頻的支持　　本地存儲　　離線Web應用程式　　地理定位　　…　　這篇文章不打算覆蓋所有的HTML5規範，有關HTML5的更多信息，請參考HTML5:http://diveintohtml5.org/.
  • 令人激動的新興 Web 技術:WebGL和SVG
    最近一位 HTML5 專家 Rich Clark(作者的好朋友)為大家做了一個 HTML5 APIs 的簡介，在文章中為大家指向了一個令人迷惑的網頁(web 平臺：瀏覽器技術 http://platform.html5.org/)，其中包含兩個很長的專欄和小正文並提及到一些讓人感到迷茫的技術，例如「window.crypto.getRandomValues」和「DOM Mutation
  • 如何在Internet Explorer 11中開啟WebGL
    Windows Registry Editor Version 5.00[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl][HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl
  • webgl 迷宮項目開發總結
    收穫webgl 三個js庫webgl-utils.jswebgl-debug.jscuon-utils.js圖片加載var img = new Image();這樣可以防止webgl在渲染的時候圖片還沒加載完而出現黑屏的問題。監聽鍵盤事件保證事件代碼只運行一次。否則會重複綁定多個事件，也就是按鍵一次會觸發多次事件處理。
  • Adobe CS5可將Flash動畫轉為HTML5 Canvas
    蘋果和Adobe之間因為對Flash的支持問題而鬧得很僵，賈伯斯曾直言HTML5將取代Flash，對於HTML5，Adobe也沒有完全忽視。隨著Adobe下一代產品CS5的臨近，一個新的工具浮出水面，利用該工具，Flash動畫可以轉換成HTML 5 Canvas。
  • 基於HTML5 的 WebGL 3D 版俄羅斯方塊
    2, 3, 4,　　　　4, 2, 5,　　　　5, 0, 10,　　　　10, 5, 6,　　　　6, 7, 8,　　　　8, 6, 9,　　　　9, 10, 6　　]});與 2D 一樣，我們創建一個 ht.Node() 的基礎圖元，類型設置為我們新註冊的3D模型名稱：dataModel = new ht.DataModel();g3d = new
  • 與WebGL一起遇見網頁的未來
    通過BabylonJS，開發者可以用最少的代碼實現快速添加碰撞檢測、物理特性、燈光、攝像頭角度、紋理效果和全新的3D場景等。DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>Using
  • Canvas框架-FabricJS簡介
    demo通過fabric.Canvas獲取到canvas元素，並可以對canvas進行相應的設置,既可以通過獲取已存在的canvas元素，fabric也支持創建canvas元素，同樣也能對其進行相應操作與原生的異同
  • webgl、Javascript、HTML、ThingJS、cesium都是什麼鬼?
    webgl——是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5。Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能創建複雜的導航和數據視覺化。
  • WebGL 3D程序開發
    這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能創建複雜的導航和數據視覺化。
  • 基於WebGL的虛擬太陽系漫遊技術實現 ThingJS 科幻片
    ThingJS技術分析5. 系統實現步驟3D可視化技術逐漸應用到現代多媒體的課堂教學中。虛擬太陽系是一款天文類的3D可視化應用，它藉助3D在線瀏覽，模擬了一個「真實」的太陽系，以太陽為中心，八大行星逆時針圍繞太陽公轉，還有很多衛星繞轉在行星或者小天體周圍。ThingJS平臺在線提供教學演示連結，在中小學生的地理課堂或網上天文館作為虛擬課程案例使用。
  • 基於HTML5的WebGL經典3D虛擬機房漫遊動畫
    Doom 的截圖，這個流派的突破遊戲之一，展示了第一人稱射擊遊戲的典型視角現在博物館或者公司也經常使用到 3D 動畫做宣傳片等等，3D 動畫演繹最大的優勢，便是在於內容與形式上給人的真實感受。它比平面作品更直觀，比 2D 動畫更真實，所以更能給觀賞者以置身於廣告環境當中的感受,大大增強廣告的說服力。
  • 如何用 JavaScript+Canvas 開發一款超級燒腦小遊戲?
    Canvas 繪圖時，會從兩個物理像素的中間位置開始繪製並向兩邊擴散 0.5 個物理像素。可參考微信官方縮放策略調整另外，需要注意的是，這裡的 canvas 是由 weapp-adapter 預先調用 wx.createCanvas() 創建一個上屏 Canvas，並暴露為一個全局變量 canvas。如何繪製任意多邊形圖形？
  • IE11中的WebGL探秘:渲染速度超Chrome
    WebGL相對於canvas2d的優勢對Construct 2遊戲而言，IE支持WebGL令人感到高興。如今你可以使用WebGL著色器效果，並且IE11也可兼容該效果。如此一來，諸如「Rain demo」等Construct 2遊戲圖像將更加生動。WebGL支持又將為IE11中Construct 2遊戲帶來哪些效果呢？
  • 幾乎與美國同期上映動畫《瘋狂原始人2》,可以說是一部科研成果
    七年磨一劍的匠心之作，七年時間，能夠讓一個團隊沉得住氣、安得下心，像搞科研一樣，踏踏實實，埋頭苦幹，為了一個史無前例的動畫效果，反覆地創造新的動畫自定義工具，不斷迭代動畫引擎，在這一過程中，不光打磨了作品，還創造了工具，更是積累的經驗並煅練了人。
  • JS+Canvas 帶你體驗「偶消奇不消」的智商挑戰
    canvas 繪圖時，會從兩個物理像素的中間位置開始繪製並向兩邊擴散 0.5 個物理像素。當設備像素比為 1 時，一個 1px 的線條實際上佔據了兩個物理像素（每個像素實際上只佔一半），由於不存在 0.5 個像素，所以這兩個像素本來不應該被繪製的部分也被繪製了，於是 1 物理像素的線條變成了 2 物理像素，視覺上就造成了模糊。