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

2020-03-24 19:14:20

字體：大中小

供稿：網(wǎng)友

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

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

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

提示：您可以先修改部分代碼再運(yùn)行
Firefox3.0.x的尷尬Firefox3.0.x雖然支持了canvas元素，但是并沒(méi)有完全按照規(guī)范來(lái)實(shí)現(xiàn)，規(guī)范中的fillText、measureText兩個(gè)方法在Firefox3.0.x中被幾個(gè)Firefox特有的方法代替，因此在Firefox3.0.x中使用Canvas時(shí)需要先f(wàn)ix這個(gè)幾個(gè)方法在不同瀏覽器中的差別。下面這代碼取自MozillaBespin項(xiàng)目，它修正了Firefox3.0.x中Canvas的Context對(duì)象與HTML5規(guī)范不一致的地方：

提示：您可以先修改部分代碼再運(yùn)行
注意：到Opera9.5為止，Opera還不支持HTML5規(guī)范中Canvas對(duì)象的fillText以及其相關(guān)方法和屬性。Hello,Canvas!在對(duì)Canvas進(jìn)行了一些初步了解后，開(kāi)始來(lái)寫(xiě)我們的第一個(gè)Canvas程序，聞名的HelloWorld的又一個(gè)分支 Hello,Canvas ：

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

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html表單選項(xiàng)菜單option與optgruop標(biāo)簽的用法詳解

下一篇：html文本控制顯示字?jǐn)?shù)超出用省略號(hào)的方法