HTML5 Canvas: 在HTML頁面中新增Canvas
阿新 • • 發佈：2019-02-16
原文:
本文翻譯自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Adding Canvas to the HTML Page”.
在HTML頁面的<body>中，可以用像下面的程式碼來新增<canvas>標籤：
<canvasid="canvasOne"width="500"height="300"> Your browser does not support HTML5 Canvas. </canvas>
譯註：對於canvas，以下寫法是不允許的：
<canvasid="canvasOne"width="500"height="300"/>
讓我們來看一下上述程式碼到底做了些什麼。<canvas>標籤有3個主要的屬性，包括：
- id。我們可以在JavaScript程式碼中用id值來引用該<canvas>標籤。在上述程式碼中，id值為canvasOne。
- width。canvas的寬度，以畫素為單位。在上述程式碼中，width值為500個畫素。
- height。canvas的高度，以畫素為單位。在上述程式碼中，height值為300個畫素。
在Canvas的開始標籤<canvas>與結束標籤</canvas>之間，我們可以放置任意一段文字；當開啟HTML網頁的瀏覽器不支援Canvas的時候，這段文字會顯示在Canvas標籤所在的地方。在上面的程式碼中，我們使用的文字為“Your browser does not support HTML5 Canvas.”。
在JavaScript中用document物件來引用canvas元素
當HTML頁面載入後，document物件指代了該頁面中的所有元素，因此我們可以用DOM來引用上述程式碼中定義的<canvas>。
我們需要Canvas物件的引用，這樣就可以知道在哪裡顯示用Canvas介面進行的繪畫。
首先，我們定義一個名為theCanvas的變數來儲存Canvas物件的引用。
然後，我們呼叫document物件的getElementById()函式，將傳入的引數設為canvasOne（HTML頁面中<canvas>標籤的id），來獲取Canvas物件：
var theCanvas= document.getElementById("canvasOne");