體驗未來:10個會讓你驚嘆不已的HTML5畫布(CANVAS)技術應用演示-UI...

2020-12-19 視覺同盟

隨著老式瀏覽器(IE6)的逐漸淘汰，現代瀏覽器（火狐瀏覽器，谷歌瀏覽器，Opera，Safari）走向主流，越來越多的HTML5和CSS3技術開始出現在各種網站上。這些最新的網頁技術究竟能給我們今後的瀏覽帶來什麼樣的改變？


下面的這是10個HTML5畫布(canvas)技術效果演示一定會讓你驚嘆不已。當然，也許你也會認為，過去在老式瀏覽器中用flash技術也能實現這樣的效果。但是，下面的這些演示只使用了現代瀏覽器裡自帶技術，完全不需要藉助 Flash 或 Silverlight 之類的插件。這種技術門檻的降低必將給這些技術的普及繁榮創造不可或缺的前提保障。

（提示：用谷歌瀏覽器效果最佳）

01. 風好大，吹亂我的發

這是我最喜歡的一樣演示，因為裡面有一個很可愛的小女孩，似乎是有了人氣就更能讓人動心。如果你也喜歡這個小女孩，那就移動你的滑鼠，讓風從各個方向吹動它的頭髮。

→ 觀看演示

 

02. 撕扯布單

撕扯布單的這個演示在過去的幾個月裡成為了網際網路上的大明星。用你的滑鼠在這個網狀布單上拖拽，你會發現它動畫效果非常的順滑，而完成這些效果的只是一小段代碼，想必它已經讓你驚嘆不已。然而，不僅這些，這個動畫還能響應你的拖拽的力度和速度，根據不同的力道，表現出不同的撕扯破壞效果，夠神奇吧，完美的HTML5畫布功能的體現。

→ 觀看演示

 

03. 幻影文字

這個演示更為複雜。在使用了大量計算後，作者為我們呈現了一個高度複雜的動畫。你能從畫面上看到 Helvetica字母不停的蠕動和變化，分解和重組，你還可以使用滑鼠來改變視角。由於完全使用現代瀏覽器的自帶技術，這個演示在相對老舊的硬體上也能完美呈現。

→ 觀看演示

 

04. 佛光普照

這個演示可以稱做HTML5畫布(canvas)技術應用的典型代表。演示中，你可以通過劃線來改變光線的傳播方向。所有的光線和反射等都是實時的，簡單幾條線就能創造出意外的美景。

→ 觀看演示

 

05. 五彩斑斕

這個演示用到了色彩，位置，連接線，透明度的各種變換，當你用滑鼠點擊畫布時，會看到水波一樣的效果。動作非常的流暢。

→ 觀看演示

 

06. 粒子波

在這演示中移動你的滑鼠，你會發現那些點像似始終和你保持距離的小精靈，你動它們就閃開，你走，它們就匯合。像水紋，像沙粒。很有趣的一個製作。

→ 觀看演示

 

07. 騎車遊戲

要說HTML5的畫布技術，我們不能不說一些遊戲製作。HTML5的畫布技術為未來網頁遊戲製作提供了無可爭議的絕佳平臺，下面這個簡單但卻精彩的自行車遊戲就向我們充分展示了html5 canvas的強大功用。

→ 觀看演示

 

08. 汽車

這個演示跟上面的那個自行車很類似。你從可以看出它完全具備了一個遊戲的各種元素。碰撞效果，重力加速度對物體運動的影響，多個物體的並發控制等等，這些都是用簡單的html和js實現的。

→ 觀看演示

 

09. 手勢控制幻燈片播放

這個演示的是一個更為複雜的現代瀏覽器超前體驗，名為 手勢 + Reveal.JS，這個實驗使用了 WebRTC 和 JavaScript 來調用攝像頭，目前只有使用谷歌瀏覽器才能正確的運行。該技術為用戶提供了一個手勢操作的界面，允許你使用手勢來上下左右翻動指揮幻燈片的運行。這裡的手勢並不是手機觸控螢幕手勢，而是通過電腦上連接的攝像頭觀察你在空中揮舞雙手動作判斷如何翻頁。當然這種控制方式看起來並不新鮮，但再強調一遍，因為它是用純HTML+Javascript實現的，所以它能在任何一臺過去 5 年內生產的電腦上完美運行。

→ 觀看演示

 

10. 敲碎的視頻

這絕對是這裡最吸引眼球的一個演示——一個視頻鏡面爆破效果的奇異呈現。當你點擊播放中的視頻畫面時，畫面會破裂成碎片並四散開去，更奇妙的是，破碎的畫面小碎片裡仍然在播放它應有的那部分畫面，很快所有的碎片又會聚攏復位。真是奇思妙想。

→ 觀看演示

 

原文連結：體驗未來——10個會讓你驚嘆不已的HTML5畫布(CANVAS)技術應用演示

更多UI博客精選

相關焦點

  • html5 canvas畫布繪製矩形和圓形
    html5為我們提供了非常有特色的標籤，canvas標籤為我們可以實現在網頁中畫畫提供了便利，接下來我們列舉他的常用操作。新建一個html5的文檔，建立一個canvas畫布，設置長寬，這裡需要特別注意，canvas標籤可以在標籤內設置width,height,也能通過css來設置，但是通過css來設置的標籤，當繪製圖形的時候會變形，所以我們建議直接在標籤內設置。
  • 用HTML5把Canvas緩衝區內容輸出到屏幕
    【IT168技術】歡迎來到我的HTML5遊戲編程小教程。我會儘量簡要說明如何使用HTML5 canvas元素和JavaScript創建簡單的遊戲。本教程將省略一些代碼，但絕非故意。您可以隨時查看我的遊戲演示。
  • 使用HTML5畫布實現的超棒javascript動畫儀錶板:gauge.js
    使用HTML5畫布實現的超棒javascript動畫儀錶板：gauge.js 在線演示今天我們分享來自guage.js的超棒動畫儀錶板實現，這個類庫使用
  • 開發者值得關注的HTML5新特性Canvas
    走近Canvas 元素標籤　　官方對Canvas元素標籤的定義為：Canvas(畫布)可以用來進行繪製圖形，繪製遊戲的圖案或者其他圖形圖案，允許使用腳本動態渲染點陣圖像。簡單來說，Canvas就是允許你在HTML5中，使用Javascript去繪製你喜歡的任何圖形了，包括文字，圖片、線、點、各種形狀等。
  • html中繪製圖形標籤的詳細介紹
    本篇將介紹的是html中<canvas>標籤的用法，感興趣的朋友可以一起研究一下！在html5中，新增了很多實用的標籤，今天為大家介紹的是html5新增標籤<canvas>，<canvas>標籤只是一個容器，對內容並沒有樣式的更改。那它在html中有什麼用，接下來我們就一起來看看吧！
  • 10款讓人驚嘆的HTML5圖片動畫特效
    在線演示/源碼下載2、CSS3圖片模糊效果今天我們來分享一款利用CSS3技術讓圖片模糊的效果，我們只需要將滑鼠滑過圖片，就可以讓圖片產生模糊的特效，利用CSS3實現圖片模糊效果也非常簡單，用CSS3今天我們再來看一款HTML5 3D相冊瀏覽應用，圖片可以手動播放，也可以自動播放，效果非常震撼，趕緊把這款HTML5 3D相冊分享給你的朋友吧。
  • 15 個 HTML5 Canvas 應用欣賞
    今天，我們收集了15個優秀的canvas應用，每個開發者都應該知道。Sketchpad 是個優秀的 HTML5 應用，幫助我們創建有用的繪圖應用，使用JS和canvas元素。Sketchpad 的繪圖工具具有豐富的功能。
  • H5的新功能,canvas畫布的矩形繪製,看了就會!
    繪製矩形canvas提供了三種方法繪製矩形： ---->繪製一個填充的矩形（填充色默認為黑色） fillRect(x, y, width, height) clearRect(x, y, width, height) x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的坐標。 width和height設置矩形的尺寸。
  • HTML5新標籤——canvas
    canvas簡介HTML5 標籤用於繪製圖像（通過腳本，通常是 JavaScript）。不過， 元素本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。stroke()作用：會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑。
  • 推薦8款HTML5相關的特殊效果
    其次，追加了本地資料庫等 Web 應用的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。今天我們推薦8款使用HTML5生成的特殊效果，希望可以對大家的使用帶來幫助！
  • 15個精彩的HTML5畫布(Canvas)動畫示例
    15個精彩的HTML5畫布(Canvas)動畫示例 站長之家（CHINAZ.com）3月22日編譯：
  • 「實用乾貨」商業模式畫布(Business canvas)
    一、商業模式畫布介紹（Business canvas）商業模式畫布是一種能夠幫助團隊催生創意、降低猜測、確保他們找對了目標用戶、合理解決問題的工具。我們做任何產品的最終目的是活下去，要活下去則必須有商業模式，而現在這個時代的商業模式不再是隨便拍腦袋就能想得到了，這時商業模式畫布能夠有效幫你做分析。
  • JS+Canvas 帶你體驗「偶消奇不消」的智商挑戰
    偶消奇不消，在簡單的遊戲規則下卻有著無數種可能性，需要你充分發揮想像力去探索。看似簡單卻具有極大的挑戰性和趣味性，這就是其魅力所在！溫馨提示，體驗後再閱讀此文體驗更佳哦！預覽：Talk is cheap,Show me the code.
  • HTML5常用的標籤
    html4和html5對比：Html4代表示例：<div id=「header」></div><div id=「nav」></div><div class=「section」> <div class=「article」
  • Canvas框架-FabricJS簡介
    一個簡單的canvas demo通過fabric.Canvas獲取到canvas元素，並可以對canvas進行相應的設置,既可以通過獲取已存在的canvas元素，fabric也支持創建API介紹繪製圖形fabric.Rect({}) 方形- left:0, // 距離畫布左側的距離- top:0, // 距離畫布上邊的距離
  • 用一天入門 canvas 和 JavaScript
    HTML canvas 用最簡單的方式，使web 開發者能夠通過JavaScript在網頁上繪製圖形。這樣，HTML 元素變得更加有趣。<canvas> 元素只是個容器，你總是需要使用 JavaScript 來準確繪製圖形。有人可能會說，我們總是可以添加這些點，也可以添加SVG，但這又會多麼有趣？
  • 使用HTML5和Javascript設計繪圖程序
    【IT168 專稿】前言　　在本文中，將會介紹如何使用HTML5和Javascript去設計一個簡單的繪圖程序。HTML5的一個新的特性是canvas畫布功能，通過canvas畫布的強大功能可以實現繪畫不少圖形和其他絢麗的功能。
  • HTML5中37個最重要的技術點
    HTML5是全球資訊網聯盟（W3C）和網絡超文本應用技術工作組（WHATWG）之間合作輸出的。03、為什麼HTML5裡面我們不需要DTD（Document Type Definition文檔類型定義）？這裡有10個重要的新的表單元素在HTML5中被介紹：ColorDateDatetime-localEmailTimeUrlRangeTelephoneNumberSearch讓我們一步一步了解這10個元素
  • canvas 入門實戰--邀請卡生成與下載
    1.前言寫了很多的javascript和css3的文章，是時候寫一篇canvas的了。canvas是html5提供的一個新的功能！
  • canvas文本繪製自動換行、字間距、豎排等實現
    = '32px sans-serif';context.fillText('我是一段被maxWidth限制的文本', 0, 50, 200如果沒有maxWidth限制，則文本會一行走到底，直到超出畫布尺寸，有點類似CSS中設置容器white-space:nowrap + overflow:hidden的表現。