如何顯示影像 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
Canvas 元素是 HTML 文件上可以繪製的區域，您可以使用 JavaScript 產生圖形，像是動畫、圖表和遊戲。這個主題說明使用 Canvas 元素顯示影像所需的步驟，幫助您開始使用。
先決條件
這個主題假設您：
- 可以利用 JavaScript，以適用於 JavaScript 的 Windows Library 範本建立基本的 Windows 市集應用程式。
- 具備 HTML 及 JavaScript 的基本知識。
如需使用 JavaScript 建立您的第一個 Windows 市集應用程式的指示，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。如需使用 WinJS 範本的指示，請參閱＜如何取得和使用 WinJS 工具組＞。
指示
步驟 1: 取得轉譯內容
我們必須先從 Canvas 元素取得轉譯內容，才可以在畫布上繪製影像。所有繪圖方法和屬性皆定義於轉譯內容中。因為每個 <canvas> 元素都有一個關聯的轉譯內容 (變數名稱通常指定為 ctx)，所以在頁面完全載入之前，我們無法存取此內容 (亦即直到在 DOM 中完全置入 canvas 元素為止)。確保能從 DOM 使用 canvas 元素的其中一種方法是將指令碼區塊放在頁面的結尾，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
.
.
.
</style>
</head>
<body>
.
.
.
<script>
.
.
.
</script>
</body>
</html>
我們現在可以取得以下轉譯內容：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
</script>
</body>
</html>
如圖所示，canvas 元素預期的影像為 491px x 538px。我們取得內容 (ctx) 的方式為取得 DOM 內所有畫布元素的清單，挑選第一個 (也是唯一的一個) 元素，然後呼叫 getContext('2d') 來取得它的內容。
步驟 2: 載入要顯示的影像
因為影像需要一些時間才能下載至用戶端，因此最好在影像完全載入後再行存取。這可以使用影像物件 onload 事件處理常式來達成，如下所示：
var imageToDraw = new Image();
imageToDraw.onload = function() {
// It is now safe to access the image.
}
imageToDraw.src = 'images/duckCat.jpg';
在本範例中，只有在完全載入相關影像 (duckCat.jpg) 之後，才會呼叫匿名函式。
步驟 3: 顯示影像
我們可透過使用 onload 事件處理常式，在畫布上顯示影像，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
body {
width: 402px; /* Accommodate the 1px canvas borders. */
margin: 0 auto; /* Center the page's content. */
}
h1 {
text-align: center;
}
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<h1>How to display an image using the canvas element</h1>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
var imageToDraw = new Image();
imageToDraw.onload = function() {
ctx.drawImage(imageToDraw, 0, 0);
}
imageToDraw.src = 'images/duckCat.jpg';
</script>
</body>
</html>
備註
與上個範例相比，drawImage 方法可接受更多參數，也相當有用。如需詳細資訊，請參閱 Mozilla 開發人員網路網站上的使用影像。