【網頁設計】如何在頁面中放置canvas元素?

2016-08-24 1975 2 編輯:深色多郎 來源:網頁設計

canvas是HTML5中新增的一個重要元素,專門用來繪制圖形。在頁面上放置一個canvas元素,就相當于在頁面放置了一塊“畫布”,可以在其中進行圖形的繪制。

在HTML頁面中插入canvas元素是非常直觀和簡單的,如下面的代碼就是一段可以被插入到HTML頁面中的canvas代碼。

<canvas width="200" height="200"></canvas>

以上代碼會在頁面上顯示出一塊200像素×200像素的“隱藏”區域。假如要為其增加一個邊框,可以用標準CSS邊框屬性來設置。代碼如下。

<canvas id="djx" style="border" width="200" height="200"></canvas>

在上面的代碼中,不但用CSS邊框屬性設置了邊框,而且還增加了一個值為“djx”的di特性,這樣做的主要目的是為了在開發過程中可以通過id來快速找到該canvas元素。對于任何canvas來說,id是尤為重要的,這主要是因為對canvas元素的所有操作都是通過腳本代碼控制的,如果沒有id的話,想要找到要操作的canvas元素會很難。

首先,通過應用特定的canvas id值來獲取對canvas對象的訪問權。這里引用的id為djx。接著定義一個context變量,調用canvas對象的getContext方法,同時傳入使用的canvas類型。這里是通過傳入“2d”來獲取一個二維上下文,這也是到目前為止唯一可用的上下文。具體代碼如下所示。

var canvas=document.getElementByld('djx');

var context=canvas.getContext('2d');

接下來,基于這個上下文執行劃線的操作,主要是調用了3個方法——beginpath、moveTo和lineTo,傳入了這條線的起點和終點的坐標。決堤代碼如下所示。

content.beginPath();

context.moveTo(70,140);

context.lineTo(140,70);

最后,在結束canvas操作的時候,通過調用context.stroke()方法完成斜線的繪制。具體代碼如下所示。

context.stroke();

}

window.addEventListener("load",drawDiagonal,true);

html5

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾