十款非常優秀的 HTML5 線上設計工具

網路有很多優秀的設計和開發工具可能大家都不知道，因此這篇文章就向設計師推薦十款優秀 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 動畫初學者非常有用的工具。

 

英文連結：10 Online HTML5 Tools For Web Designers