網絡有很多優秀的設計和開發工具可能大家都不知道，因此這篇文章就向設計師推薦十款優秀 HTML5 在線工具，這些工具能夠幫助設計師們設計出更有創意的作品。隨著 HTML5 技術的不斷成熟，網絡上涌現出越來越多的優秀 HTML5 應用，一起看看下面這些很棒的工具。

Online Sprite Box Tool

這款在線的 CSS Sprite 樣式生成工具，結合jQuery、CSS3和HTML5開發，能夠幫助你快速的生成CSS Sprite 樣式。

Online Pattern Generator Tool

這是一款在線紋理生成工具，當設計師需要制作網頁背景的時候，它能夠幫上大忙。這款工具提供了很多的配置選項，使用非常簡單，太棒了！

Online 3D Sketch Tool

這是一款很特別的繪圖工具，使用功能強大的 HTML5 Canvas 來實現3D繪圖功能。向讓畫布進行立體選擇，你需要按住空格鍵并水平拖動鼠標，非常酷！

Online Font Testing Tool

對于設計師來說，選擇一款合適的字體是一個艱難的過程。這款非常棒的字體測試工具可以幫助設計師即時瀏覽新字體在頁面中的現實效果，不要修改任何的HTML或者CSS代碼，只需要把字體文件拖放的頂部的工具欄中，新字體就會出現在下拉列表中。

Online Velocity Sketch Tool

這是一款基于HTML5的在線素描工具，能在在線繪制一些奇特的東西，圖片顯示的就是我隨手畫的，我相信設計師們能夠畫出更加有創意的東西。

Online XRay Tool

通過這款工具，你可以查看到任何頁面上的元素細節， 類似于Firebug的元素查看工具，不過這個是在線的，不需要安裝插件，只需要把它們網站上的一個書簽項放到書簽欄，使用的時候點擊該書簽，然后再點擊需要查看的元素就可以了。

Online Automatoon (animation) Tool

Automatoon 是一款完全基于HTML5開發的在線工作制作工具，完全沒有使用Flash，制作的動畫能運行于 iPhones、iPad、Android設備以及各種常見瀏覽器。

Online HTML5 Audio Maker Tool

隨著HTML5發展，會有越來越多的HTML5網站開始使用強大的HTML5 audio標簽功能。這個在線 audio 生成工具能夠幫助你了解HTML5 audio提供的各種新特性，還有一款類似的在線 HTML5 video 制作工具?。

Online SVG to HTML5 Canvas Tool

所有的矢量藝術包(Illustrator、Inkscape 等等) 都能夠導出為 SVG (可縮放矢量圖形)，而這款工具幫助幫助你把SVG文件轉換成HTML5 canvas。

Chrome Ajax Animator Tool

這是一個跨平臺的動畫工具，在線和離線都能使用。你只需要安裝有Chrome瀏覽器，然后通過快速指導教程引導入門，是一款對HTML5 動畫初學者非常有用的工具。

您可能還喜歡

?

• 九個讓人難以置信的HTML5和JavaScript實驗
• 讓人眼花繚亂的 HTML5 和 JavaScript 效果
• 推薦18個基于 HTML 5 Canvas 開發的圖表庫
• 29款基于 HTML5 Canvas 開發的網頁游戲
• 五大主流瀏覽器 CSS3 和 HTML5 兼容性大比拼

?

英文鏈接：10 Online HTML5 Tools For Web Designers

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

轉載于:https://www.cnblogs.com/lhb25/archive/2011/11/21/10-online-html5-tools-for-web-designers.html

總結

以上是生活随笔為你收集整理的推荐十款非常优秀的 HTML5 在线设计工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。