HTML頁(yè)面中添加Canvas標(biāo)簽示例

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