網絡有很多優秀的設計和開發工具可能大家都不知道，因此這篇文章就向設計師推薦十款優秀 HTML5 在線工具，這些工具能夠幫助設計師們設計出更有創意的作品。

隨著 HTML5 技術的不斷成熟，網絡上涌現出越來越多的優秀 HTML5 應用，一起看看下面這些很棒的工具。

01、Online Sprite Box Tool

地址：http://www.spritebox.net/

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

02、Online Pattern Generator Tool

地址：http://patternizer.com/

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

03、Online 3D Sketch Tool

地址：http://hakim.se/experiments/html5/sketch/

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

04、Online Font Testing Tool

地址：http://hakim.se/experiments/html5/sketch/

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

05、Online Velocity Sketch Tool

地址：http://jayweeks.com/sketchy-structures-html5-canvas/

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

06、Online XRay Tool

地址：http://westciv.com/xray/

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

07、Online Automatoon (animation) Tool

地址：http://www.automatoon.com/

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

08、Online HTML5 Audio Maker Tool

地址：http://westciv.com/tools/audio/

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

還有一款類似的在線 HTML5 video 制作工具?(地址：http://westciv.com/tools/video/)。

09、Online SVG to HTML5 Canvas Tool

地址：http://www.professorcloud.com/svg-to-canvas/

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

10、Chrome Ajax Animator Tool

地址：https://chrome.google.com/webstore/detail/ginffkjapdobanedcblllenliboglpkp

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

總結

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

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