在HTML5未成熟應用的時候，流媒體播放等一些精彩應用必須借助第三方軟件才可以實現，比如Flash等。但是現在HTML5已經將其超過，它不但可以播放視頻和音頻，而且還可以開發出各種網絡在線應用程序，如標識的地理位置、離線存儲、拖放、圖片處理等。在這篇文章中，我們來看看最近國外的一些使用HTML5開發的網站。 請注意，您將需要一個支持HTML5的瀏覽器。點擊訪問查看可以使用HTML5的瀏覽器！ 一、處理圖片
: w" Q3 Q4 B% t% v3 l4 v# g# x5 O& J; l$ G. c; H
/ q8 f7 g% ^+ Q9 ?$ g- T 網址：http://radikalfx.com/files/collage/demo.html
{9 B- p. y/ q 本網站使用了HTML5的Canvas元素來創建一個圖層列表，通過從圖片庫選擇圖片添加後，會新建一個新的圖層，每一層都可以通過操縱將圖片進行：移動、縮放、旋轉、改變圖層上下級、刪除層、改變透明度、改變混合模式、啟用或禁用的圖片陰影。
: @( y& \ t8 F 二、圖片編輯
S$ W+ @1 H7 e: p: H6 S8 c0 `5 _7 Q5 n1 h% V
. M+ m7 z6 z0 S% b2 G 網址：http://www.aviary.com/html5editor
9 c0 i: g3 y2 v+ x2 s 百鳥居的HTML5的圖片編輯器十分的非常方便快捷，可以說它將在線圖片編輯革新化。 通過簡單的上傳和點擊，任何人都可以通過互聯網編輯精美的圖片，或者通過多層操作來執行簡單的圖層合併、單層編輯等功能。, p- P W+ Z; @' H. R' b. C
三、待辦事項
$ E" L4 X7 p, d8 V* O% @( |, @; y# v
 1 R6 a/ V: k! M: w% C. f0 D5 o. s
網址：http://10k.aneventapart.com/Uploads/58/
& b1 G; ^" V: P2 q 5List是一個使用HTML5、CSS3和JavaScript編寫的記事本，利用了HTML5的功能，包括localStorage，它具有客戶端數據庫存儲功能。通過5List，可將用戶提交的待辦數據保存到用戶本地機器上。
, |5 D6 T! {% R7 W% b+ l c F) U 四、拖拽圖片上傳, p6 V: x: j. z
& Z5 N- A# b; }+ c' A6 ]
i" X5 j! Z" L9 {4 t 網址：http://demos.hacks.mozilla.org/openweb/imageUploader/
, i3 i0 }0 E9 t1 _8 R5 D% S6 s( z 這個使用HTML5開發的圖片上傳功能，在Mozilla的Firefox3.6中測試通過，發現Firefox3.6支持HTML5的部分功能。 它支持將圖片直接拖拽到瀏覽器進行上傳。- {. y! i+ x4 n/ P
五、google吃豆子6 H2 q9 r2 @) Q l6 J, [5 x
( C- [. Y9 I- c
. S2 g% f+ q; W, T3 s" p% S 網址：http://html5games.net/game/google-pacman/( S; E3 b& b( F! ?) ^
這是谷哥為紀念吃豆子遊戲30週年，將網站首頁換成此遊戲LOGO而設計的!據說這個遊戲255關，包括最後一關!
& d( A& n ]4 t; ? 六、表單5 {, s, w Y3 ^# q; J; S* h
0 D0 [: V; v6 T4 ^ * [* u% B: k- V& |( t* I9 ~8 |) b* g
網址：http://thinkvitamin.com/code/fun-with-html5-forms/" c, Y. { N0 F. W: D
一個非常有用的表單示例代碼，使用HTML5開發，包含了常見的表單操作，它能將需要的表單字段進行驗證、字段佔位符、日期選擇器和電子郵件驗證等，可用於網頁和手機網頁等具體領域。# u+ V2 {( J$ i" R+ \# G$ I" [+ W: Q3 I
七、圖表8 s* j- N; e+ {% \4 a6 `
/ N( m/ i/ P4 q5 [/ y5 X
{0 H5 Q( X$ W8 x0 l 網址：http://www.humblesoftware.com/finance/index& J' p5 f( X( b5 A
HumbleFinance是使用HTML5開發的數據可視化工具，如使用HTML5進行交互式數據圖形演示，它可用於顯示任何兩個2-D的數據集。) s3 ?5 A8 J- P- S: v1 r$ B1 L
八、在線幻燈片製作
8 I8 Y* e9 Z! a, K/ g1 [( {/ Z3 g G+ m2 i }
 9 y, h( `( e6 T) d
網址：http://10k.aneventapart.com/Uploads/143/
4 v7 ^; L/ V% ~- d% L# F7 K 此幻燈片展示了HTML5的localStorage和ContentEditable功能，應用十分豐富。簡單的操作界面，利用CSS3功能，同時又保持較小的文件大小。它支持將內容「自動保存」到本地(通過localStorage)，擁有增加、減少和主題更換操作: W E( v" e9 @
九、在線繪圖( n4 ]% m0 Y5 y+ j" s: q: Z
' l6 K/ N( P' m* u' F! [
 + W* V' E X; n# k |; ^! c; ^
網址：http://muro.deviantart.com/
6 t* }9 J$ u- m+ }6 H* [6 ] MURO是一個純HTML5開發的在線繪圖工具，它有兩種模式：基本和專業，它們都免費使用。 MURO支持效果有濾鏡、銳化工具和畫筆，所有的操作在一個直觀和簡單的界面裡進行，使用相當容易。6 J5 H* K! q/ _
十、地理定位1 C* u8 ?( o. l6 d# R
0 f* Z* y% w3 D% v( a8 W
8 P2 d0 L$ h& F7 m$ C 網址：http://studio.html5rocks.com/#Geolocation: F1 z, }1 h: M w, r( I z
這個web應用程序會自動檢測您所在的位置，然後使用google地圖返回附近的就業信息。 不過需要注意的是，它要求分享您瀏覽器所處的地址信息。 |
評分
-
查看全部評分
|
發表於 2011-1-3 12:16:00
提升卡
沉默卡
变色卡