HTML5 Canvas 起步(1) - 基本概念_0

2020-03-24 19:14:20

字體：大中小

來源：轉載

供稿：網友

什么是Canvas canvas 是一個新的html' target='_blank'>HTML元素，這個元素在HTML5中被定義。這個元素通常可以被用來在HTML頁面中通過JavaScript進行繪制圖形、合成圖像等等操作，也可以用來做一些動畫。當然，目前HTML5規范還在草稿階段，正式發布也許要等到2010年，不過現在已經有不少瀏覽器已經支持了部分HTML5規范。目前支持canvas元素的瀏覽器有Firefox3+、Safari4、Chrome2.0+等，因此，在運行本頁中的例子時，請確保你使用的是上述瀏覽器之一。盡管在Mozilla已經有不少關于Canvas的教程，我還是決定把自己的學習過程記錄下來。如果覺得我寫的不夠明白，那么你可以在參考資料中找到Mozilla網站上Canvas教程的鏈接。另外，可以在這里找到一些有趣的Canvas示例。開始使用Canvas使用Canvas很簡單，與使用其他HTML元素一樣，只需要在頁面中添加一個 canvas 標簽即可：

復制代碼代碼如下:
canvas id="screen" width="400" height="400" /canvas

當然，這樣只是簡單的創建了一個Canvas對象而已，并沒有對它進行任何操作，這個時候的canvas元素看上去與div元素是沒什么區別的，在頁面上什么都看不出來：）
另外，canvas元素的大小可以通過width與height屬性來指定，這與img元素有點相似。
Canvas的核心：Context
前面說到可以通過JavaScript來操作Canvas對象來進行繪制圖形、合成圖像等操作，這些操作并不是通過Canvas對象本身來進行的，而是通過Canvas對象的一個方法getContext獲取Canvas操作上下文來進行。也就是說，在后面我們使用Canvas對象的過程中，都是與Canvas對象的Context打交道，而Canvas對象本身可以用來獲取Canvas對象的大小等信息。
要獲取Canvas對象的Context很簡單，直接調用canvas元素的getContext方法即可，在調用的時候需要傳遞一個Context類型參數，目前可以用的并且是唯一可以用的類型值就是2d：

提示：您可以先修改部分代碼再運行
Firefox3.0.x的尷尬Firefox3.0.x雖然支持了canvas元素，但是并沒有完全按照規范來實現，規范中的fillText、measureText兩個方法在Firefox3.0.x中被幾個Firefox特有的方法代替，因此在Firefox3.0.x中使用Canvas時需要先fix這個幾個方法在不同瀏覽器中的差別。下面這代碼取自MozillaBespin項目，它修正了Firefox3.0.x中Canvas的Context對象與HTML5規范不一致的地方：

提示：您可以先修改部分代碼再運行
注意：到Opera9.5為止，Opera還不支持HTML5規范中Canvas對象的fillText以及其相關方法和屬性。Hello,Canvas!在對Canvas進行了一些初步了解后，開始來寫我們的第一個Canvas程序，聞名的HelloWorld的又一個分支 Hello,Canvas ：

提示：您可以先修改部分代碼再運行
運行示例，Canvas對象所在區域顯示出 Hello,World! ，這正是代碼中ctx.fillText( Hello,World! ,20,20);的作用。fillText以及相關屬性fillText方法用來在Canvas中顯示文字，它可以接受四個參數，其中最后一個是可選的：voidfillText(inDOMStringtext,infloatx,infloaty,[Optional]infloatmaxWidth);其中maxWidth表示顯示文字時最大的寬度，可以防止文字溢出，不過我在測試中發現在Firefox與Chomre中指定了maxWidth時也沒有任何效果。在使用fillText方法之前，可以通過設置Context的font屬性來調整顯示文字的字體，在上面的示例中我使用了 20ptArial 來作為顯示文字的字體，你可以自己設置不同的值來看具體的效果。結束暫時就到這里了，我會一邊看規范一邊寫這個系列：）參考資料1.HTML5的Canvas，腳本語言的新舞臺,hred2.TheCanvasElement,WHATWG3.CanvasTutorial中文,Mozilla4.CanvasTutorial英文,Mozilla5.canvassupportinOpera,Opera
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html表單選項菜單option與optgruop標簽的用法詳解

下一篇：html文本控制顯示字數超出用省略號的方法