HTML5學習筆記（四）

html5 canvas（續）

一、替代內容

在訪問頁面時，如果瀏覽器不支援canvas元素，那麼就需要提供乙份替代**，來告知訪問者出現的問題。

下面這段**就是實現這一功能：

update yourbrowser tp enjoy canvas!!

在不支援canvas的ie8.0中開啟，效果如下：

二、檢測瀏覽器支援情況

在建立canvas元素之前可以先對瀏覽器進行檢測，確保瀏覽器可以支援。這段**按照書上的**並不會正確執行，通過查詢相關資料，我發現書上的**其實是不完整的，將**寫成下面的樣子就可以正常執行了。

分別用chrome36.0和ie8.0做測試，因為chrome36.0是支援canvas的，因此它的執行結果應該是顯示「你的瀏覽器支援html5。」而ie8.0不支援canvas因此它的執行結果應該是顯示「你的瀏覽器不支援html5，趕快公升級一下吧！」。效果如下圖所示

三、在頁面中加入canvas

通過如下的**可以在頁面中建立一塊隱藏的區域

其中引數height用來指定區域的高度，width用來指定區域的寬度，這個區域是隱藏的，在頁面中並不能直接觀察到。但是通過給區域加上邊框，就可以通過邊框查詢到區域的位置了。

效果如圖所示

完成了上面的操作之後就可以在上面「畫畫」，最簡單的畫一條直線。**如下

其中var canvas = document.getelementbyid("diagonal");通過canvasid獲取canvas物件的訪問許可權。

var context = canvas.getcontext("2d");使用canvas物件的getcontext方法傳入希望使用的canvas型別。

下面的幾行就是畫圖的基本操作：

beginpath():不論開始繪製何種圖形，第乙個需要呼叫的就是beginpath。這個簡單的函式不帶任何引數，它用來通知canvas將要開始繪製乙個新的圖形了。

moveto(x,y):不繪製，將當前位置移動到新的目標座標(x,y)。

lineto(x,y):不僅將當前位置移動到新的目標座標(x,y)，而且在兩個座標之間畫一條直線，實際上moveto和lineto只是傳入了這條直線的起始點，並沒有真正劃線，而是在結束canvas操作時，通過呼叫context.stroke()方法完成線條的繪製。效果如下圖所示：