HTML頁面中新增Canvas標籤範例_html5教學技巧

在HTML頁面的

中，可以用像下面的程式碼來新增標籤：

複製程式碼

程式碼如下:

Your browser does not support HTML5 Canvas.
。 🎜>代碼如下:

讓我們來看看上述程式碼做了些什麼。 標籤有3個主要的屬性，包括：

1.id。我們可以在JavaScript程式碼中用id值來引用該標籤。在上述程式碼中，id值為canvasOne。 2.width。 canvas的寬度，以像素為單位。在上述程式碼中，width值為500個像素。 3.height。 canvas的高度，以像素為單位。在上述程式碼中，height值為300個像素。

在Canvas的開始標籤與結束標籤之間，我們可以放置任意一段文字；當開啟HTML網頁的瀏覽器不支援Canvas的時候，這段文字會顯示在Canvas標籤所在的地方。在上面的程式碼中，我們使用的文字為「Your browser does not support HTML5 Canvas.」。

在JavaScript中用document物件來引用canvas元素

當HTML頁面載入後，document物件指涉了該頁面中的所有元素，因此我們可以用DOM來引用上述程式碼中定義的。

我們需要Canvas物件的引用，這樣就可以知道在哪裡顯示用Canvas介面進行的繪畫。

首先，我們定義一個名為theCanvas的變數來保存Canvas物件的參考。

然後，我們呼叫document物件的getElementById()函數，將傳入的參數設為canvasOne（HTML頁面中標籤的id），來取得Canvas物件：

複製程式碼

程式碼如下:

var theCanvas = document.getElementById("canvasOne");