《基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計(jì)進(jìn)階教程》課件-第4章

第4章HTML5的繪圖4.1canvasAPI簡(jiǎn)介4.2瀏覽器支持檢測(cè)4.3什么是canvas4.4canvas中的坐標(biāo)4.5在canvas上繪圖

4.1canvasAPI簡(jiǎn)介

canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動(dòng)畫等。沒有canvas的年代，繪圖只能借助Flash插件實(shí)現(xiàn)，頁面不得不用JavaScript和Flash進(jìn)行交互。有了canvas，我們就再也不需要Flash了，可以直接使用JavaScript完成圖形繪制。

4.2瀏覽器支持檢測(cè)

InternetExplorer9、Firefox、Opera、Chrome以及Safari支持canvas元素及其屬性和方法，InternetExplorer8以及更早的版本不支持canvas元素。和其他HTML5元素一樣，在支持canvas元素的瀏覽器中，canvas元素里面的內(nèi)容是不會(huì)顯示的，但是在不支持的情況下，會(huì)顯示出來。于是，我們可以把它作為提示用語，用來在不支持canvas元素的瀏覽器中進(jìn)行提示。方法如下：

一般來講，創(chuàng)建canvas元素并檢查getContext屬性就可以檢測(cè)瀏覽器是否支持canvas元素，但是在一些瀏覽器下不夠準(zhǔn)確，所以再檢測(cè)一下elem.getContext("2d")的執(zhí)行結(jié)果，就可以完全確定。

關(guān)于canvas元素，有一點(diǎn)要補(bǔ)充的，那就是fillText方法。盡管瀏覽器支持canvas元素，但是我們并不能確定它是否支持fillText方法。檢測(cè)支持fillText的方法如下：

4.3什么是canvas

canvas只是HTML5中的一個(gè)標(biāo)簽而已，可定義一個(gè)畫布，它本身沒有任何作用，就相當(dāng)于是一個(gè)矩形區(qū)域的畫板，在畫板上沒有任何東西，但是你可以使用JavaScript在它上面畫任何你想畫的東西，你可以控制其上的每一個(gè)像素。它默認(rèn)的寬度為300px，高度為150px，背景為透明色。

canvas是支持樣式控制的，比如設(shè)置邊框、邊距、背景等，但是有一個(gè)地方值得注意：在設(shè)置canvas寬度和高度時(shí)，如果用style樣式來設(shè)置，會(huì)把圖像進(jìn)行拉伸，因此請(qǐng)注意時(shí)刻為canvas元素設(shè)置寬度和高度。例如：

頁面顯示效果如圖4-1所示。

圖4-1canvas元素是行內(nèi)元素的表現(xiàn)

4.4canvas中的坐標(biāo)

canvas中的坐標(biāo)與HTML標(biāo)準(zhǔn)坐標(biāo)一致，即左上角為(0，0)，右下角為設(shè)置的寬度及高度(x，y)；(0，0)點(diǎn)稱為原點(diǎn)，也叫初始點(diǎn)，即繪圖開始的位置。如以下代碼：

在頁面中的表現(xiàn)如圖4-2所示。

圖4-2canvas中的坐標(biāo)

4.5在canvas上繪圖

例4-1在canvas上繪制一個(gè)矩形。在canvas上繪制一個(gè)矩形的代碼如下：

在上面的代碼中，我們先在頁面中放置了一個(gè)canvas元素，設(shè)置元素的寬度為1000?px，高度為800

px，id為canv；再通過CSS為該元素添加一個(gè)灰色的背景色；然后通過JavaScript在canvas中繪制一個(gè)矩形。核心代碼如下：

大多數(shù)Canvas繪圖API都沒有定義在canvas元素本身上，而是定義在通過畫布的getContext("2d")方法獲得的一個(gè)“繪圖環(huán)境”對(duì)象上(getContext()方法目前只有"2d"這一個(gè)參數(shù)，以后會(huì)有"3d"，至于什么時(shí)候公布大家可以自行查找相關(guān)資料)。因此，在canvas中繪圖時(shí)，大部分時(shí)間其實(shí)都是在操作“繪圖環(huán)境”對(duì)象上進(jìn)行繪制。

CanvasAPI分為屬性部分和方法部分，內(nèi)容很多，逐個(gè)解讀可能不利于我們對(duì)功能的理解，因此，后面的內(nèi)容我們將會(huì)以功能為單位進(jìn)行講解。

為了便于說明，我們?cè)诶L圖前獲取canvas元素和繪圖環(huán)境元素，統(tǒng)一為以下代碼：

4.5.1繪制直線

繪制直線相關(guān)的方法和屬性如表4-1所示。

在頁面中繪制直線的代碼如下：

頁面顯示如圖4-3所示，moveTo(x，y)方法只是把筆觸移動(dòng)到目標(biāo)位置，并不會(huì)留下軌跡，而lineTo(x，y)方法會(huì)從筆觸當(dāng)前位置移動(dòng)到目標(biāo)位置，并且進(jìn)行連線。另外需要注意的是，使用lineTo(x，y)方法之前一定要確定筆觸位置，否則canvas會(huì)將筆觸的當(dāng)前位置視為筆觸初始位置而不會(huì)創(chuàng)建任何線條。

圖4-3在canvas中繪制直線

4.5.2繪制方框

繪制方框相關(guān)的方法和屬性如表4-2所示。

在頁面中繪制矩形的代碼如下：

頁面顯示效果如圖4-4所示。

從頁面顯示效果中，我們可以看出不同方法的作用是不同的。在canvas中，從左向右繪制出了3個(gè)寬度為100px、高度為200px的矩形。從中可以總結(jié)出如下規(guī)律：

●?rect()不能單獨(dú)使用，必須借助fill()、stroke()方法。

●?rect()+fill()組合的效果和fillRect()一致，可等價(jià)。

●同理，rect()+stroke()組合的效果和strokeRect()一致，可等價(jià)。

4.5.3繪制圓或弧

繪制圓形或弧形的使用方法為arc(x，y，r，sAngle，eAngle，counterclockwise)。其中：x、y是圓心坐標(biāo)；r是半徑；sAngle是開始弧度；eAngle是結(jié)束弧度；counterclockwise表示順時(shí)針還是逆時(shí)針方式，默認(rèn)為順時(shí)針false，逆時(shí)針為true。

注意：此處是使用弧度(rad)來進(jìn)行計(jì)算的，大家在高中時(shí)期應(yīng)該學(xué)習(xí)過弧度，接下來我們來回憶一下弧度有關(guān)的知識(shí)：

●

1rad=1r≈57.3°。

●

一周=360°

=(2p)rad。

●

1°

=(2p/360)rad=(p/180)rad。

JavaScript中沒有p，但是有函數(shù)Math.PI，如果需要用到準(zhǔn)確的弧度，則需要使用此函數(shù)。

在頁面中繪制一個(gè)空心圓的代碼如下：

頁面顯示效果如圖4-5所示。

圖4-5在canvas中繪制圓和弧

canvas中繪制圓的開始位置是在最右邊，方向默認(rèn)是順時(shí)針，示意圖如圖4-6所示。

圖4-6繪制圓的示意圖

4.5.4開始和關(guān)閉路徑

我們來看這樣一個(gè)需求：在canvas中繪制兩個(gè)圓，一個(gè)空心，一個(gè)實(shí)心。

用之前所學(xué)的內(nèi)容，嘗試進(jìn)行下面的代碼：

上面的代碼中，先繪制一個(gè)空心的圓，再繪制一個(gè)實(shí)心的圓，運(yùn)行的結(jié)果如圖4-7所示。

圖4-7繪制兩個(gè)圓錯(cuò)誤代碼執(zhí)行效果

從圖4-7中可以看出，兩個(gè)圓都是實(shí)心，且第一個(gè)圓還有紅色的描邊。分析錯(cuò)誤原因?yàn)椋旱谝粋€(gè)賀其實(shí)繪制了兩次。

解決這個(gè)問題需要用到如表4-3所示的兩個(gè)方法。

這兩個(gè)方法一般是成對(duì)存在的，closePath()方法會(huì)將畫筆移到beginPath()的位置，并且結(jié)束畫布。接下來，我們對(duì)上面有問題的代碼進(jìn)行改造，在每一次繪制圓之前開始路徑，繪制完成后結(jié)束路徑。其代碼如下：

頁面顯示效果如圖4-8所示。

圖4-8繪制兩個(gè)圓正確代碼執(zhí)行效果

4.5.5繪制文字

繪制文字相關(guān)的方法和屬性如表4-4所示。

在頁面中繪制兩行文字的代碼如下：

頁面顯示效果如圖4-9所示。

圖4-9在canvas中繪制兩行文字

canvas中繪制文字時(shí)，起始坐標(biāo)并不是左上角，而是文字基線(Baseline)。在CSS中我們知道文字有基線，在canvas中繪制文字同樣有基線?；€可以通過textBaseline屬性進(jìn)行設(shè)置，默認(rèn)值是alphabetic。通過下面的代碼可以看出文字與其坐標(biāo)的關(guān)系：

頁面顯示