HTML頁面中新增Canvas標籤示例

2022-09-28 09:57:09 字數 1008 閱讀 9823

在html頁面的

中,可以用像下面的**來新增標籤:

複製**

**如下:

your browser does not support html5 canvas.

譯註:對於canvas,以下寫法是不允許的:

複製**

**如下:

讓我們來看一下上述**到底做了些什麼。標籤有3個主要的屬性,包括:

1.id。我們可以在j**ascript**中用id值來引用該標籤。在上述**中,id值為canvasone。

2.width。pxwnrcanvas的寬度,以畫素為單位。在上述**中,width值為500個畫素程式設計客棧。

3.height。canvas的高度,以畫素為單位。在上述**中,height值為300個畫素。

在canvas的開始標籤與結束標籤之間,我們可以放置任意一段文字;當開啟html網頁的瀏覽器不支援canvas的時候,這段文字會顯示在canvas標籤所在的地方。在上面的**中,我們使用的文字為「your browser does not support html5 canvas.」。

在j**ascript中用document物件來引用canvas元素

當html頁面載入後,document物件指代了該頁面中的所有元素,因此我們可以用dom來引用上述**中定義的。

我們需要canvas物件的引用,這樣就可以知道在**顯示用canvas介面進行的繪畫。

首先,我們定義乙個名為thecanvas的變數來儲存canvas物件的引用。

然後,我們呼叫程式設計客棧document物件的getelementbyid()函式,將傳入的引數設為canvasone(html頁面中標籤的id),來獲取canvas物件:

複製**

**如下:

var thecanwww.cppcns.comvas = document.getelementbyid("canvasone");

本文標題: html頁面中新增canvas標籤示例

本文位址: /web/html5/9408.html

HTML5新增畫布元素canvas

canvas元素是乙個正常的html元素,相當於在頁面插入乙個畫布。在標記中設定寬 高屬性,在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性,在縮放畫布後,裡面內容也會縮放。預設情況下畫布是透明的,除非你在畫布上繪製了內容,否則是看不到它的。如果你想我證明畫布確實存在,就能看到乙個黑...

html頁面中引入html

我們寫頁面通常會遇到這種情況,乙個模組很多頁面都用到,那麼我們為了方便就會單獨寫到乙個頁面,然後引入進去,我知道的有三種 1 用標籤 例 iframe有自己預設的高度,如果你引入的頁面高度超出他預設的高度會超出隱藏,所以,要加上height 2 用標籤 例 object也有自己的預設高度,如果你引入...

WordPress頁面鏈結新增 html字尾方法

預設wordpress頁面不能實現偽靜態鏈結,比如 http com begin.html,手動在鏈結中新增 html 會自動轉碼為 html 但萬能的wordpress,你能想到的功能都會有相應的外掛程式幫你實現。之前的一篇 為wordpress分類 頁面和標籤頁固定鏈結新增.html字尾,通過外...