本篇文章給大家分享的是有關(guān)HTML頁(yè)面中怎么添加一個(gè)Canvas標(biāo)簽,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
在HTML頁(yè)面的
代碼如下:
Your browser does not support HTML5 Canvas.
譯注:對(duì)于canvas,以下寫法是不允許的:
讓我們來看一下上述代碼到底做了些什么。標(biāo)簽有3個(gè)主要的屬性,包括:
1.id。我們可以在JavaScript代碼中用id值來引用該標(biāo)簽。在上述代碼中,id值為canvasOne。2.width。canvas的寬度,以像素為單位。在上述代碼中,width值為500個(gè)像素。3.height。canvas的高度,以像素為單位。在上述代碼中,height值為300個(gè)像素。
在Canvas的開始標(biāo)簽與結(jié)束標(biāo)簽之間,我們可以放置任意一段文本;當(dāng)打開HTML網(wǎng)頁(yè)的瀏覽器不支持Canvas的時(shí)候,這段文本會(huì)顯示在Canvas標(biāo)簽所在的地方。在上面的代碼中,我們使用的文本為“Your browser does not support HTML5 Canvas.”。
在JavaScript中用document對(duì)象來引用canvas元素
當(dāng)HTML頁(yè)面加載后,document對(duì)象指代了該頁(yè)面中的所有元素,因此我們可以用DOM來引用上述代碼中定義的。
我們需要Canvas對(duì)象的引用,這樣就可以知道在哪里顯示用Canvas接口進(jìn)行的繪畫。
首先,我們定義一個(gè)名為theCanvas的變量來保存Canvas對(duì)象的引用。
然后,我們調(diào)用document對(duì)象的getElementById()函數(shù),將傳入的參數(shù)設(shè)為canvasOne(HTML頁(yè)面中標(biāo)簽的id),來獲取Canvas對(duì)象:
var theCanvas = document.getElementById("canvasOne");
以上就是HTML頁(yè)面中怎么添加一個(gè)Canvas標(biāo)簽,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
公司名稱:四川綿陽(yáng)平武網(wǎng)站建設(shè)工作室 聯(lián)系電話:18980820575
網(wǎng)站備案號(hào):蜀ICP備2024061352號(hào)-3
四川平武建站 四川平武網(wǎng)站建設(shè) 四川平武網(wǎng)站設(shè)計(jì) 四川平武網(wǎng)站制作 成都做網(wǎng)站