萬盛學電腦網 >> 網頁制作 >> Html5 >> HTML5移動應用開發第5章：新的可視化UI 特性
HTML5移動應用開發第5章：新的可視化UI 特性
先決條件
在本文中，您將使用最新的 Web 技術開發 Web 應用程序。這裡的大部分代碼只是 HTML、JavaScript 和 CSS — 所有 Web 發人員的核心技術。所需的最重要的工具是用於進行測試的浏覽器。本文大部分代碼將在最新桌面浏覽器上運行，但也有一些例外，我們將在文章中進行說明。當然，您也必須在移動浏覽器上測試，為此，您需要最新的 iPhone 和 Android SDKs。本文將使用 iPhone SDK 3.1.3 和 Android SDK 2.1。參見 參考資料 獲取鏈接。
通過 Canvas 實現圖形效果
多年以來，Web 開發人員一直在抱怨 Canvas。現在，為何還有人會抱怨浏覽器中的一個原生畫圖 API 呢？畢竟，它允許您創建某種圖形界面，否則您將需要某種浏覽器插件（每位移動 Web 開發人員都知道，插件在一些最流行的移動浏覽器上並不可用）。Web 開發人員抱怨 Canvas 的原因是：盡管現在它可用於 Firefox 和 Safari 已經很多年，但最流行的桌面浏覽器 Microsoft®Internet Explorer® 一直不支持它。甚至 Internet Explorer 9 的早期版本也不支持 Canvas。因此，多年來，Canvas 一直是最大的技術笑話。您可能會發現，這些令人驚歎的 Canvas 樣例遍布整個 Internet，但您不能僅僅因為 Internet Explorer 不支持它就將它用於大多數 Web 應用程序。幸運的是，對於移動 Web 開發人員來說，Canvas 沒有這樣的限制。您瞄准的所有基於 Webkit 的浏覽器都能實現 Canvas 並極大地優化其性能。
Canvas API 是一個低級畫圖 API，它支持創建直線、曲線、多邊形和圓圈，並用彩色、漸變色等填充它們。在 Canvas 上，您可以創建文本，執行各種各樣的幾何轉換。可以想見，這樣的 API 的用途是無限的。我們來看一個使用 Canvas 來創建一個圖形報告的應用程序。圖 1 展示了該應用程序的屏幕截圖：一個顯示每年結果的柱狀圖。
圖 1. 運行在 Android 浏覽器上的基於 Canvas 的報告應用程序
圖 1 所顯示的並不是浏覽器中的一幅靜態圖像。這個報告圖形是使用這個 Canvas API 實時生成的。清單 1 展示了創建這個報告的 HTML。
清單 1. 報告 HTML
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width; initial-scale=1.0;
- maximum-scale=1.0; user-scalable=0;"/>
- <meta name="apple-touch-fullscreen" content="YES" />
- <title>HTML 5 Reports</title>
- <script type="text/javascript">
- function init(){
- var data = [{year : "2007",sales : 49},
-
