使用以 Canvas、SVG 及 CSS3 繪製的圖形 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
本節包含在使用 JavaScript 的 Windows 市集應用程式中使用圖形的資訊。
在這個章節中
| 主題 | 說明 |
|---|---|
Canvas 元素會在頁面上產生矩形的點陣圖畫布，您可以在畫布上使用 JavaScript 動態繪製圖形影像。畫布非常適用於建立遊戲，或者即時產生圖形或定期變更圖形。 |
|
Canvas 元素是 HTML 文件上可以繪製的區域，您可以使用 JavaScript 產生圖形，像是動畫、圖表和遊戲。 這個主題說明使用 Canvas 元素製作基本繪圖動畫所需的步驟，幫助您開始使用。 |
|
形狀與線條不限於純色。畫布中所使用的漸層其實是一種色彩值，因此您可以將它套用至 fillStyle 與 strokeStyle 屬性。 漸層可用來在影像中產生濃度或色彩的方向性變化。 當您要產生背景影像、在地圖中指示高度，或在表面上新增光線和陰影時，都可以使用這個功能。 漸層對於簡化網頁應用程式很實用，因為您不需使用影像即可做到這些效果，可將載入這些效果所需的頻寬和時間降至最低。 而且由於它們是透過程式設計方式產生的，因此可以輕鬆調整及重複使用。 |
|
Canvas 元素是 HTML 文件上可以繪製的區域，您可以使用 JavaScript 產生圖形，像是動畫、圖表和遊戲。這個主題說明使用 Canvas 元素顯示影像所需的步驟，幫助您開始使用。 |
您可以使用 Windows 市集應用程式中的 CSS 和 SVG 畫布，新增快速、簡易的向量圖形及讓 UI 產生動畫效果。
幾乎所有的向量圖形都可以使用 SVG 或畫布繪製，不過視工作而定，有時也會有更多工作必須由開發人員或電腦完成。
階層式樣式表層級 3 (CSS3) 2D 轉換可讓您在 2-D 空間中平移 (移動)、旋轉、調整物件大小，以及使物件失真。CSS3 3D 轉換在 3D 空間中也支援這些相同的轉換，並增加透過透視轉換模擬景深感覺的功能。
個別指定多個轉換時，轉換的結果是累積的，而且與套用轉換的順序有關。