圖形的新思維

HTML5 提供三種實作圖形的核心技術 - 可縮放向量圖形 (SVG)、Canvas 元素以及階層式樣式表 (CSS)。本節將分為一般圖形和遊戲開發相關圖形來描述這些技術。

在本節中

主題說明

SVG 和 Canvas 之間的選擇

本主題將從高階觀點開始提供 SVG 和 HTML Canvas 2D 內容的比較,然後接著討論一些比較程式碼範例,例如光源追蹤及綠幕處理。

SVG 座標轉換

本主題涵蓋與 getScreenCTM() 方法有關的 SVG 座標轉換。

基本 SVG 動畫

本主題涵蓋基本 SVG 動畫,這同時也是中級 SVG 動畫的先決條件。假設您已具備基本的 HTML 和 JavaScript 知識。為了充分了解本主題提供的資料,請準備約一小時的時間來研讀。

中級 SVG 動畫

本主題介紹中級的 SVG 動畫技術,並且是從基本 SVG 動畫主題結束的地方開始銜接。為了充分了解本主題提供的概念,請準備約一小時的時間來研讀。

進階 SVG 動畫

本主題提供為網站建立 SVG 動畫的更進一步概念。開始本教學課程之前,請先熟悉基本 SVG 動畫中級 SVG 動畫,並且確實了解 HTML 和 JavaScript。

使用 Canvas 建立 3D 圖形

本主題涵蓋使用 HTML5 canvas 元素操作 3D 物件的技術。

 

簡介

除了傳統影像格式 (圖形交換格式 (GIF)、可攜式網路圖形 (PNG)、JPG 等等) 支援之外,最新的瀏覽器主要還透過下列三種核心技術啟用靜態和動態圖形功能:

  • SVG 針對向量式 (相對於點陣圖式) 圖形、濾鏡和動畫提供了強大的標記語言。如需實用的概觀,請參閱可縮放向量圖形 (SVG)SVG
  • Canvas 元素提供解析度相依點陣圖 Canvas 給指令碼,這個 Canvas 可以用來動態呈現圖表、遊戲圖形或其他視覺影像。如需實用的概觀,請參閱 HTML5 Canvas 元素
  • 最新的 CSS 反覆項目提供許多圖形導向的增強功能,包括漸層、2D 和 3D 轉換、動畫以及轉場。如需實用的概觀,請參閱階層式樣式表層級 3 (CSS3)CSS

激發靈感

下列範例示範使用 SVG、Canvas 以及 CSS3 可能達成的效果。

連結說明
粒子加速除了傳統的 2D 物件之外,也可以使用 Canvas 以動畫方式呈現 3D 物件,如這個高效能範例所示。 了解可能達成的效果之後,請參閱 3D Canvas 來了解做法。
世界最大的 Pacman世界廣為流行的連鎖 PAC-MAN® 迷宮即使用 HTML5 Canvas 建立。
Disney Tron: Legacy使用 SVG 加上 IE 的硬體加速技術而成為知名的電子漫畫書。
Flickr 明信片展示使用 CSS3 2D 轉換模組搭配 Flickr 所能達成的效果。

 

示範

想要多一些靈感嗎?請嘗試下列範例。

連結說明
CSS3 轉場動畫CSS 轉場可以讓您順暢地從原始狀態以動畫方式轉換成新的狀態。CSS 動畫透過使用計時函式和主要畫面格提供額外的控制。這個範例需要 Internet Explorer 10 或更新版本。或者,與 HTML5 相容的其他最新瀏覽器。
CSS3 2D3D 轉換這些實機操作示範展示 CSS3 轉換的運作方式。這個範例需要 Internet Explorer 10 或更新版本。 或者,與 HTML5 相容的其他最新瀏覽器。
CSS3 漸層漸層是什麼呢?以此為例,圖片解說遠勝於千言萬語,而這個實機操作示範正是這樣的功能。
IE Beatz Canvas 示範這個範例需要 Windows Internet Explorer 9 或更新版本。 或者,與 HTML5 相容的其他最新瀏覽器。
Mr. Potato Gun Canvas 示範這個範例需要 Internet Explorer 9 或更新版本。 或者,與 HTML5 相容的其他最新瀏覽器。
Canvas Pad:使用 HTML5 Canvas 學習及遊戲!更新程式碼並按 Ctrl+Enter 鍵,即可即時更新 Canvas。這個範例需要 Internet Explorer 9 或更新版本。 或者,與 HTML5 相容的其他最新瀏覽器。
Seadragon Ajax 提供的 Canvas 縮放範例 這個範例需要 Internet Explorer 9 或更新版本。 或者,與 HTML5 相容的其他最新瀏覽器。
CSS 漸層背景製作器這個範例需要 Internet Explorer 10 或更新版本。 或者,與 HTML5 相容的其他最新瀏覽器。
SVG–oids Canvas 範例這個重建的 1979 年經典電動玩具,示範僅使用少許 SVG、JavaScript 以及程式設計技巧就可達成的效果。這個範例需要 Internet Explorer 9 或更新版本。 或者,與 HTML5 相容的其他最新瀏覽器。

 

深入了解

準備好更進一步了解了嗎?請由下列連結開始著手。

連結說明
使用 CSS3 轉場和動畫增加特質這個 IEBlog 文章提供有關這些新 CSS 功能的深入資訊。
CSS3 3D 轉換CSS3 轉換使用 3D 轉換來處理全新的維度。這個 IEBlog 文章會說明基本概念。
Canvas 開發人員指南HTML5 Canvas API 被解構成簡單的逐步開發階段。
Disney TRON 幕後:如何使用 HTML5 建立電子書Giorgio Sardo 將帶領您從設計開始到進行部署,以及了解如何為您的網站選擇正確的 Web 標準。
如何使用 HTML5 Canvas 建立視覺影像庫本教學課程建立了一個使用 Canvas、SVG 以及 JavaScript 架構將影像和大型資料集視覺化的應用程式。
如何針對您的網站在 Canvas 和 SVG 之間做選擇 深入了解如何選擇 Canvas、SVG 或兩者兼具的組合。

 

遊戲

對遊戲開發有興趣嗎?請查閱下列資源。

連結說明
5 個建立 HTML5 遊戲的最佳做法,馬上行動!深入了解 HTML5 遊戲開發架構以及如何充分利用瀏覽器平台。
如何使用 EaselJS 讓 Canvas 中的小精靈動起來使用 HTML5 Canvas 元素撰寫休閒遊戲時,您需要一個控制小精靈的方法。深入了解如何使用 EaselJS 遊戲外掛程式讓它們動起來。
如何使用 HTML5 SVG 和 Canvas 撰寫 BrikBloc 遊戲HTML5 遊戲專家 David Cathue 將示範如何使用 Canvas、SVG 以及 JS 架構讓遊戲程式碼變容易。
如何使用 Impact HTML5 遊戲引擎建立小行星遊戲深入了解如何使用 Impact 遊戲引擎 (目前已發表的引擎中較完備的一款) 建立簡單的太空小行星遊戲。

 

 

 

顯示:
© 2014 Microsoft