HTML頁面中添加Canvas標(biāo)簽示例
我要評論在HTML頁面的<body>中，可以用像下面的代碼來添加<canvas>標(biāo)簽：
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
譯注：對于canvas，以下寫法是不允許的：
<canvas id="canvasOne" width="500" height="300" />
讓我們來看一下上述代碼到底做了些什么。<canvas>標(biāo)簽有3個主要的屬性，包括：
1.id。我們可以在JavaScript代碼中用id值來引用該<canvas>標(biāo)簽。在上述代碼中，id值為canvasOne。
2.width。canvas的寬度，以像素為單位。在上述代碼中，width值為500個像素。
3.height。canvas的高度，以像素為單位。在上述代碼中，height值為300個像素。
在Canvas的開始標(biāo)簽<canvas>與結(jié)束標(biāo)簽</canvas>之間，我們可以放置任意一段文本；當(dāng)打開HTML網(wǎng)頁的瀏覽器不支持Canvas的時候，這段文本會顯示在Canvas標(biāo)簽所在的地方。在上面的代碼中，我們使用的文本為“Your browser does not support HTML5 Canvas.”。
在JavaScript中用document對象來引用canvas元素
當(dāng)HTML頁面加載后，document對象指代了該頁面中的所有元素，因此我們可以用DOM來引用上述代碼中定義的<canvas>。
我們需要Canvas對象的引用，這樣就可以知道在哪里顯示用Canvas接口進(jìn)行的繪畫。
首先，我們定義一個名為theCanvas的變量來保存Canvas對象的引用。
然后，我們調(diào)用document對象的getElementById()函數(shù)，將傳入的參數(shù)設(shè)為canvasOne（HTML頁面中<canvas>標(biāo)簽的id），來獲取Canvas對象：
var theCanvas = document.getElementById("canvasOne");
相關(guān)文章
HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別簡介
這篇文章主要介紹了HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別,是網(wǎng)頁前端編程入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-11-07- HTML5引入的新標(biāo)簽有一些有趣的屬性，例如poster、autofocus、onerror、formaction、oninput，這些屬性都可以用來執(zhí)行javascript，這會導(dǎo)致XSS和CSRF跨域請求偽造。對這方2015-09-27
- 這篇文章主要介紹了HTML5中audio標(biāo)簽的使用,在各瀏覽器中添加音頻播放控件,需要的朋友可以參考下2015-09-24
- 這篇文章主要介紹了詳解HTML5中ol標(biāo)簽的用法,是HTML5入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-09-08
詳解HTML的style標(biāo)簽以及相關(guān)的CSS引用
這篇文章主要介紹了詳解HTML的style標(biāo)簽以及相關(guān)的CSS引用,是HTML和CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-27- 這篇文章主要介紹了詳解HTML的input標(biāo)簽及其禁用方法,歸納了幾種CSS中使用disabled屬性實(shí)現(xiàn)禁用的方法,需要的朋友可以參考下2015-08-05
- 這篇文章主要介紹了HTML中Li標(biāo)簽的使用示例,主要用來讓文章標(biāo)題和日期等左右對齊,需要的朋友可以參考下2015-07-13
HTML5 video標(biāo)簽（播放器）學(xué)習(xí)筆記（二）:播放控制
這篇文章主要介紹了HTML5 video標(biāo)簽（播放器）學(xué)習(xí)筆記（二）:播放控制,本文講解了獲取影片總時長、播放、暫停、獲取影片的播放時間和設(shè)置播放點(diǎn)、音量的獲取和設(shè)置等內(nèi)容,2015-04-24常用HTML meta 標(biāo)簽屬性(網(wǎng)站兼容與優(yōu)化需要)
標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)2014-12-27HTML常用標(biāo)簽大全及html標(biāo)簽的特點(diǎn)
本篇文章給大家整理些關(guān)于html常用標(biāo)簽大全及html標(biāo)簽的特點(diǎn)，希望對大家學(xué)習(xí)html相關(guān)知識有所幫助，感興趣的朋友一起學(xué)習(xí)吧2015-11-19