基于HTML5中canvas技術(shù)圖形圖像動畫研究

1、 基于HTML5中canvas技術(shù)的圖形、圖像、動畫的研究1.緒論1.1研究背景HTML5 標(biāo)準(zhǔn)在今年的10月28號正式發(fā)布，這一新標(biāo)準(zhǔn)使得基于互聯(lián)網(wǎng)，移動互聯(lián)網(wǎng)的應(yīng)用開發(fā)具備了統(tǒng)一的格式，從此不再區(qū)分版本和終端。這極大的節(jié)省了開發(fā)時間以及成本。這是HTML5引起眾多開發(fā)人員興趣的原因之一。此外，HTML5的出現(xiàn)，將是Web開發(fā)技術(shù)的一次重要飛躍。它不僅能夠使得網(wǎng)頁具備更加強大，絢麗的功能。而且，還改變了互聯(lián)網(wǎng)的許多方面。譬如，降低插件的使用、支持動態(tài)生成圖像、允許Wed程序利用本地存儲、簡化Web開發(fā)的數(shù)據(jù)提取、支持位置服務(wù)，讓W(xué)eb播放更加流暢等。這完美的解決了之前的好多問題。如，網(wǎng)站的推

2、廣不再受到大部分插件的制約。當(dāng)用戶無法上網(wǎng)的時候，仍然可以使用緩存文件完成一些功能。當(dāng)然用戶體驗也得到大大提升。HTML5也迎合了現(xiàn)代人的需求。因為，現(xiàn)在的生活節(jié)奏快，網(wǎng)絡(luò)用戶更偏向喜歡標(biāo)題、圖片、視頻，等形式。它們可以更加直接快速的讓人們達到閱讀目的。我們也希望網(wǎng)頁變得更加動態(tài)有趣，提供更多的互動機會。HTML5 的發(fā)展前景將非常廣闊，學(xué)習(xí)HTML5的時候到了。1.2研究意義首先，HTML5使得用戶可以通過不同的終端設(shè)備訪問相同的程序以及基于云的內(nèi)容。這樣我們在創(chuàng)建網(wǎng)站的時候?qū)⒉辉傩枰紤]不同終端，不同版本帶來的問題。既節(jié)省了開發(fā)時間，又節(jié)省了開發(fā)成本。其次，HTML5新增的一些功能，可以使

3、我們的網(wǎng)站變得更加強大，美觀。企業(yè)能夠成功的推廣自己，在很大程度上會依賴于網(wǎng)站的合理設(shè)計。1.3國內(nèi)外研究現(xiàn)狀在國外，HTML5這一新標(biāo)準(zhǔn)，受到許多業(yè)內(nèi)巨頭的追捧。谷歌、蘋果等把它形象的描述為用戶體驗的未來，微軟的IE9 中也加入了對html5的大量支持。到2012年11月，支持HTML5的普及率就已經(jīng)達到66%。相比，國內(nèi)的普及率要低些。主要原因在于，國內(nèi)操作系統(tǒng)的更新速度較慢。但是，HTML5標(biāo)準(zhǔn)在國內(nèi)的普及速度很快。目前大部分技術(shù)人員已經(jīng)開始嘗試著在各類網(wǎng)站中應(yīng)用更多HTML5的新特性，這將會為互聯(lián)網(wǎng)帶來新面貌。2.關(guān)鍵技術(shù)介紹2.1 HTML52.1.1 HTML5的概念 狹義的 HT

4、ML5，就是 HTML 語言的第五版，即最新版本。相對于 HTML4，這個新版添加了一些新的元素，這些新的元素一部分是為了讓網(wǎng)頁更加合理，另一部分是為了添加新的功能。里面最受歡迎的是 <canvas> 和 <video>，<canvas>可以為網(wǎng)頁添加繪圖功能，<video>可以為網(wǎng)頁加入原生的視頻支持。 廣義的 HTML5 ，還包括 CSS3 以及 JavaScript 的更多接口。我們把下一代網(wǎng)頁技術(shù)統(tǒng)稱為 HTML5。2.1.2 HTML5主要新增功能及特性介紹 HTML5主要在速度、存儲、位置、圖像等方面進行了優(yōu)化。（1） 內(nèi)容標(biāo)簽優(yōu)化H

5、TML5之前版本的內(nèi)容標(biāo)簽，它們的級別相同，不利于很好的區(qū)別各部分內(nèi)容。如：<div id=”header”>、<div id=”footer”>、<div id=”content”>。相對的，HTML5的標(biāo)簽，級別不同，各種統(tǒng)計軟件以及搜索引擎都可以快速識別出各部分內(nèi)容。如：<footer>、<header>、<content>，這樣的標(biāo)簽，使得頁面的布局更加清晰明了。（2） 表格體系優(yōu)化現(xiàn)在只需要用HTML5，就可以做出功能強大的表格。你可以通過一個簡單的設(shè)置，來定義表格中每一個單元格的輸入格式，如日期格式等等。當(dāng)然你

6、也可以設(shè)置某一項是否為必填項目。之前，要實現(xiàn)這樣的功能，是需要借助JS，或者PHP才能實現(xiàn)的。（3） 新增 Canvas API目前大部分網(wǎng)頁都不能為用戶提供直接在網(wǎng)頁上繪圖的功能，即使是簡單的幾何圖都不能實現(xiàn)。與圖片的交互也是非常局限的，大多數(shù)只是簡單的保存和點擊。想要實現(xiàn)在網(wǎng)頁上繪圖或者希望對圖片實現(xiàn)更多的交互操作，就需要借助flash等插件來實現(xiàn)。 HTML5新增的canvas元素可以讓用戶使用JavaScript 在網(wǎng)頁上繪制圖像。一個canvas 元素就像是一塊畫布，畫布是一個矩形區(qū)域，可以控制畫布上的每個像素。也可以使用SVG和MathML在網(wǎng)頁上繪圖，呈現(xiàn)矢量圖形和復(fù)雜的數(shù)學(xué)公式

7、。我們可以想象，隨著技術(shù)的不斷發(fā)展，我們有可能實現(xiàn)在線繪圖，不再需要安裝那些基本的繪圖軟件。與此同時，我們也可以實現(xiàn)，收集和生成用戶鼠標(biāo)在網(wǎng)頁中經(jīng)過的軌跡，進而分析我們的網(wǎng)站設(shè)計是否合理，該如何優(yōu)化。以求不斷提高用戶體驗。（4）音視頻 API使用HTML5就可以直接對，音頻、視頻進行整合。與此同時，HTML5提供了一整套功能強大的API ，用來控制音視頻的播放。這豐富了對媒體播放的控制。 (5)存儲（離線網(wǎng)絡(luò)應(yīng)用程序文件緩存） 目前Web應(yīng)用非常廣泛，分析其優(yōu)勢，在于，它不需要安裝，且需要占用的內(nèi)存很小。要想使用WEB，就必須在一個有網(wǎng)絡(luò)信號的地方。 但是，目前網(wǎng)絡(luò)信號不能夠覆蓋所有的地方。這

8、給我們帶來了極大的不便。也成為制約web 的一大問題。 HTML5的新增功能離線存儲，完美的解決了這一問題。其原理是，HTML5的Web storage API采用了離線存儲，就能夠生成一個清單文件，該清單文件由一系列的URL列表文件組成，這些URL 分別指向，如CSS文件、JS文件、圖片、視頻等。（這些文件在用戶瀏覽相關(guān)頁面的時候已被緩存到客戶端）當(dāng)用戶無法上網(wǎng)的時候，仍然可以使用這些文件完成一些功能。用戶在離線時的一些更改，也會被記錄到這個清單中。重新連線之后，就會自動將更改返回到應(yīng)用當(dāng)中。HTML5 的離線存儲功能，也完美的代替了cookies。Cookies一直用于將網(wǎng)站密碼緩存到本地

9、，當(dāng)需要時將密碼信息發(fā)送到服務(wù)器。它存在很大的缺陷，就是密碼信息會被反復(fù)的在本地和服務(wù)器間傳輸。這不僅增加了信息安全的風(fēng)險，也占用了帶寬。Web storage API 支持4M以上的空間作為緩存，不在將信息反復(fù)得在本地和服務(wù)器間傳輸。只是傳輸一些必須的文件。這樣一些個人信息將更加安全，同時也節(jié)省了帶寬。 （6） 速度 Web Workers 讓 JavaScript 可在后臺多線程運算，XMLHttpRequest 2 能讓 Ajax 請求提速，都是為網(wǎng)頁程序提速的。（7）利用Geolocation API獲取地理位置信息 在萬維網(wǎng)中，人們只知道某臺電腦的IP地址，卻無法知道那些數(shù)

10、據(jù)所對應(yīng)的PC所處的真實位置。最新版本的HTML5支持位置服務(wù)，它通過提供應(yīng)用接口Geolocation API，來共享自己的地理位置信息。 簡要說明Geolocation API所具備的特性：（1）本身不去獲取位置信息，而是通過如IP、WIFI、GPS等第三方來獲取 （2）用戶可以隨時開啟或者關(guān)閉這個功能，并且在程序調(diào)用位置信息之前會先征得用戶的同意，這樣就可以很好的保護用戶的隱私。（8）新增WebSocke協(xié)議，節(jié)省寬帶資源，實現(xiàn)實時通信 目前，絕大多數(shù)網(wǎng)站為了能過做到即時通訊，都用到一種叫做輪詢的技術(shù)。簡單來說，輪詢就是每隔一小段固定的時間，瀏覽器就會對服務(wù)器發(fā)出請求，服務(wù)器收到請求之后

11、，就會將最新的數(shù)據(jù)返回到瀏覽器端。當(dāng)然，瀏覽器需要不斷的發(fā)出HTTP request，才能夠真正的實現(xiàn)即時通訊。這樣就帶來一個很大的問題，就是占用了太多的寬帶資源以及服務(wù)器資源。HTML5推出以后，新增了. WebSocket API。 WebSocket API可以實現(xiàn)瀏覽器與服務(wù)器端的握手動作。之后，就形成了WebSocket通道，它可以實現(xiàn)數(shù)據(jù)的傳輸。客戶端與之間的交換的數(shù)據(jù)信息量非常小。而且，服務(wù)器可以做到主動向瀏覽器發(fā)送最新的信息。與之前的輪詢技術(shù)相比，有了很大的及進步。2.2Javascript2.2.1Javascript概述我們都知道JS是一種腳本語言，它的代碼是可以直接嵌入到

12、網(wǎng)頁中的，不需要編譯。這意味著JS不需要大量的代碼就可以實現(xiàn)我們想要的功能。JS與Java這種編程語言相比較，編寫環(huán)境要寬松的很多。它非常適合那些WEB設(shè)計人員，因為他們只是想要為網(wǎng)頁天劍一些簡單的動畫。需要明確的一點，是JAVA和JS是兩種完全無關(guān)的語言。2.2.2jQuery了解jQuery是一個JS庫，它是對JS的封裝。當(dāng)我們需要JS實現(xiàn)某一功能時，我們可以簡單地從類庫中調(diào)用現(xiàn)有的jQuery，這大大縮減了編程人員時間上的花費，同時也降低了編程的難度，與此同時，代碼的精簡，也讓后期的維護變得更加容易。2.2.3DOMDOM是一種，用于表示文檔元素的方法。這種方法可以使得HTML頁面中所有

13、元素的信息傳遞到JS中，并進行處理。需要明確的一點是，DOM表示內(nèi)容的原始結(jié)構(gòu)。網(wǎng)頁內(nèi)容加載之前，必然會先加載DOM。2.3 canvas的初步認識在HTML5代碼中天劍canvas標(biāo)簽，實際上，就是在網(wǎng)頁中添加了一塊巨型的畫布，畫布的默認大小為300*150，當(dāng)然，它的大小是可以控制的。Canvas需要配合JS來完成各種圖形的繪制。目前HTML5正在被大部分瀏覽器支持，所以我們研究canvas是非常有必要的。2.4 canvas與flash 的對比2.4.1要想在網(wǎng)頁上觀看通過FLASH制作的動畫，就必須安裝FLASH插件。HTML5新增的canvas元素可以讓用戶使用JavaScript

14、在網(wǎng)頁上繪制圖像。一個canvas 元素就像是一塊畫布，畫布是一個矩形區(qū)域，可以控制畫布上的每個像素。它不需要任何外部插件，只要瀏覽器對HTML5是支持的，我們就可以在網(wǎng)頁中直接做出想要的圖像或者動畫。2.4.2 Flash的腳本相對來說，是比較簡單的。即使你不夠?qū)I(yè)，也能夠看得懂。但是，要想利用canvas來繪制圖形、圖像、動畫，就需要開發(fā)人員對相應(yīng)的技術(shù)有較深的理解。2.4.3 Flash的出現(xiàn)以及發(fā)展要早于canvas，它的封裝性自然要更成熟一些。2.4.4 canvas 相對于flash 更利維護。網(wǎng)頁以對象的形式來插入Flash動畫，只有其設(shè)計者才能夠知道它具體的內(nèi)部特點。因此網(wǎng)頁的

15、設(shè)計者，只能夠做到簡單的插入，而不能根據(jù)自己的想法，對其做出適當(dāng)?shù)母摹６鴆anvas 的本質(zhì)就是一個 HTML5元素，所以對canvas的操作就像對網(wǎng)頁中其他元素的操作。2.4.5 最后，canvas和flash 都可以跨平臺開發(fā)。2.5 目前canvas主要的應(yīng)用方向2.5.1 canvas在網(wǎng)游的圖形設(shè)計中具有非常大的潛力，這是有目共睹的。2.5.2 移動設(shè)備的banner廣告，可以用canvas實現(xiàn)很好的效果2.5.3 可以實現(xiàn)，對文字的簡單渲染2.5.4 網(wǎng)站的開發(fā)人員可以利用canvas技術(shù)更好地做到基于網(wǎng)絡(luò)的數(shù)據(jù)傳輸 2.6 canvas與SVG繪圖技術(shù)的對比 首先對SVG進行簡

16、單的介紹，SVG是可伸縮矢量圖形的英文簡稱。它是一種使用XML的語言，用來描述二位圖形以及繪圖程序。與canvas相同的一點就是，它們都是用在客戶端的工具，與用在服務(wù)器端的其他技術(shù)相比，是很強大的。因為他不需要數(shù)據(jù)在服務(wù)器端和客戶端來回傳輸。這就有效的節(jié)省可寬帶資源以及服務(wù)器資源。同時也大大提高了繪圖的效率。它與canvas的不同點研究。（1）canvas是位圖，而SVG是矢量圖，即它是根據(jù)圖形的幾何特征畫出來的。所以當(dāng)圖像放大是，canvas圖像會失真，而SVG不會。在不同的情況選擇不同繪畫技術(shù)。（2）從搜索引擎的角度來看這兩種技術(shù)，SVG能夠被搜索引擎識別，而canvas不能。單從這方面來

17、考慮，SVG可能要優(yōu)于canvas.（3）SVG與DOM API結(jié)合使用，可以構(gòu)成一個矢量的繪圖API。相對的，canvas并不屬于網(wǎng)頁中的DOM結(jié)構(gòu)，因此它需要畫布中的坐標(biāo)軸來定位。綜上，與SVG相比，CANVAS任然具有很多不足之處。雖然它出現(xiàn)的較晚，但是它也有自身的優(yōu)勢。例如，CANVAS不會存儲畫布中的對象。當(dāng)然，也就不需要添加大量的DIV了，這樣能夠使得HTML代碼更加清晰，簡潔。設(shè)計人員在維護起來，也更輕松了。最后，CANVAS掌握起來較為容易一些。3.canvas的高級功能3.1深入理解繪圖狀態(tài)的保存和恢復(fù) 在研究繪圖狀態(tài)保存和恢復(fù)原理之前，需要先明確一個名詞的具體含義，即繪圖狀

18、態(tài)。它指的是在某一個瞬間，畫布中用2D渲染的上下文外觀的一整套屬性值。接下來，我們將在一個實例的基礎(chǔ)上，研究繪圖狀態(tài)的保存于恢復(fù)。 實例代碼如下： var canvas=$("myCanvas");var context=canvas.get(0).getContext("2d");context.fillStyle="rgb(255,0,0)"context.save(); context.fillRect(50,50,100,100); /紅色正方形context.fillStyle="rgb(0,0,255)"

19、;context.save(); context.fillRect(200,50,100,100); /藍色正方形context.restore();context.fillRect(350,50,100,100); /藍色正方形context.restore();context.fillRect(50,200,100,100); /紅色正方形解釋：畫布中的繪圖狀態(tài)會保存在一個狀態(tài)棧里面。棧的特征是先進先出，它就像是一疊紙一樣，按照時間的先后，第一個被保存的狀態(tài)，在棧的最下面，依次，最后一個繪圖狀態(tài)保存在棧的最上面。當(dāng)我們用restore方法，取出保存的狀態(tài)。首先取出的是最后被保存的裝套，依次

20、，最后取出的將是第一個被保存的狀態(tài)。這就是繪圖狀態(tài)的保存和恢復(fù)。 3.2圖像的變形 到目前為止，我們畫出來的都是最基本，也最普通的圖像。僅僅這些，圓圓不能夠滿足我們的需求。我們需要平移，放大，縮小，或者旋轉(zhuǎn)。來做出一個我們想要的效果。 3.2.1簡單的變形操作 （1）平移 代碼如下： context.fillRect(150,150,100,100); context.translate(150,150); context.fillStyle="rgb(255,0,0)" context.fillRect(150,150,100,100);解釋：translate執(zhí)行的操作

21、是對畫布坐標(biāo)原點的平移，也就是，在執(zhí)行translate這個方法之后，之后畫的圖像都是將平移后的原點作為自己的新原點來繪圖的。這就是，畫布的平移（2）放大、縮小放大、縮小是通過scale方法來實現(xiàn)的，它的兩個參數(shù)分別是X軸，和Y軸的放大倍數(shù)。同樣的，在執(zhí)行scale方法之后，之后畫的圖像都會在自己原本大小的基礎(chǔ)上，放大兩倍。（3）旋轉(zhuǎn)代碼如下：context.translate(200,200); /平移到正方形中心context.rotate(0.7854); /旋轉(zhuǎn)45度context.fillRect(-50,-50,100,100); /以旋轉(zhuǎn)點為中心繪制一個正方形需要特別注意的是，變

22、形的順序。例如，當(dāng)你首先執(zhí)行了平移操作，那么之后的旋轉(zhuǎn)45度，就是在平移的基礎(chǔ)上旋轉(zhuǎn)。 3.2.2矩陣的變換 之前我使用的所有的變形方都會影響到一個東西，那就是變換矩陣。是一個3*3的矩陣，默認情況下，它是一個單位矩陣，它表示沒有對畫布執(zhí)行過任何操作變形。 變換矩陣 單位矩陣變換矩陣中，最后一行是沒有實際意義的。變換矩陣中的6個參數(shù)，分別代表6個參數(shù)。其中，a代表x軸縮放倍數(shù)，b代表y軸傾斜，c代表x軸傾斜，d代表y軸縮放，e和f分別代表x軸和y軸平移。舉一個旋轉(zhuǎn)的例子：代碼如下：context.setTransform(1,0,0,1,0,0); var xScale=Math.cos(0.

23、7854); var ySkew=-Math.sin(0.7854); var xSkew=Math,sin(0.7854); var yScale=Math.cos(0.7854); var xTrans=200; var yTrans=200; context.transform( xScale,ySkew,xSkew,yScale, xTrans,yTrans); context.fillRect(-50,-50,100,100);解釋說明：context.setTransform(1,0,0,1,0,0);是用來重置變換矩陣的。從而保證，你所操作的矩陣 是一個沒有經(jīng)過變換的原始矩陣。需

24、要了解的一點就是，transform方法并不是直接給變換矩陣賦值，而是將現(xiàn)有的矩陣乘以我們所指定的值，得到想要的變換。這樣的工作原理，就會導(dǎo)致一個累積效應(yīng)。就是transform的后一次使用，是基于前一次的transform的。這會讓整個工作都變得復(fù)雜。 在這里我們還用到了MATH對象，我們用MATH對象來得到一些我們需要的值，使用這些值，來實現(xiàn)傾斜和縮放，得到最終的旋轉(zhuǎn)效果。 以上，我們介紹了三種基本的變形方式。我們可以通過對這三中變形方式組合使用。在大部分情況下，這已經(jīng)足夠了。3.3 圖像的合成大部分我們看到的圖片設(shè)計都是已經(jīng)合成的，如，我們用PS設(shè)計的圖片，都是富哦有圖層疊加的最后效果。

25、接下來我們要研究的是canvas的合成，它主要是通過一個叫做globleAlpha的屬性來實現(xiàn)的。globleAlpha的值是位于0與1之間的，0代表絕對透明，而1代表完全不透明。默認的情況下，值為1。globleAlpha屬性設(shè)置好之后，會影響之后繪制的所有圖像。在一定程度上，它是一個全局屬性。我們還可以對每一個圖形對象，設(shè)置透明度。即通過給rgba賦一個0到1之間的某一個值。圖形的合成有11中方式，下面將對其中最常用的8個進行簡單說明。在說明之前，首先需要了解的是，源是指我們將要繪制的新圖形，而目標(biāo)值的是我們已經(jīng)繪制的2D渲染上下文。Source-over表示源在目標(biāo)之上Destinati

26、on-over目標(biāo)繪制在源之上Source-atop將源繪制在目標(biāo)之上，重疊部分以及目標(biāo)的其他部分，透明度是之前目標(biāo)的透明度，重疊部分是之前源的透明度Destination-atop目標(biāo)繪制在源之上，重疊部分以及源的透明度值是之前目標(biāo)的透明度，而目標(biāo)透明度值則是之前源的透明度值。Source-in重疊部分只繪制源，其余部分都變?yōu)橥该鱀estination-in與上面的source-in正好相反，兩者的重疊部分保留目標(biāo)，不重疊部分都變?yōu)橥该鱏ource-out與目標(biāo)不重疊的地方繪制源，其他的都變?yōu)橥该鱀estination-out與源不重疊的區(qū)域保留目標(biāo)，其他的都變?yōu)橥该?.4 漸變大部分時候，

27、幾種簡單的顏色值并不能滿足我們的需要，需要一些漸變的顏色來補充。Canvas中fillStyle和strokeStyle均可以接受漸變的顏色值。 Canvas支持兩種漸變方式，一種是放射漸變，一種是線性漸變。其中線性漸變的方法為createLinearGrdient，而放射漸變對應(yīng)的方法為createRadialGradient. 放射漸變是使用createRadialGradient（x0,y0,r0x1,y1,r1）方法創(chuàng)建的，它有6個參數(shù)，前面的三個參數(shù)，描述的是一個開始圓，后面的三個參數(shù)描述的是一個結(jié)束圓.其中其中x和y分別是橫縱坐標(biāo)，r是圓的半徑長度。接下來，通過具體的實例來研究放射

28、漸變。代碼如下：var gradient=context.createRadialGradient(300,300,10,100,100,50);gradient.addColorStop(0,"rgb(0,0,0)");gradient.addColorStop(1,"rgb(150,150,150)");context.fillStyle=gradient;context.fillRect(0,0,canvas.width(),canvas.height();代碼解釋：開始圓坐標(biāo)為(300,300)，半徑為10；結(jié)束圓的坐標(biāo)為（100,100），半徑

29、為50 。最終得到的是一個椎體。開始圓為黑色，慢慢漸變?yōu)榻Y(jié)束圓的灰色。3.5 圖像的復(fù)雜路徑這是本篇文章關(guān)于canvas高級功能的最后一個介紹內(nèi)容。制作一些簡單的直線構(gòu)造的圖像較為簡單。這里我么重點介紹曲線的繪畫。要想在畫布中繪制一條曲線，我們可以使用ARC方法或者arcTo方法，但是，只能繪制出一些相同半徑的曲線。如果要想繪制一些更加復(fù)雜的曲線。就需要使用貝塞爾曲線。是通過控制點來實現(xiàn)曲線的繪制的。二次貝塞爾曲線需要一個控制點，三次貝塞爾曲線需要兩個控制點，依次類推。4.用canvas處理圖像和視頻4.1使用canvas加載圖像 通過一定的操作將圖像加載到畫布中，我們就可以對圖像進行處理。加

30、載圖像非常簡單，只需要drawImage方法就可以。代碼如下：Conteax.drawImage(image,x,y); 其中image 可以是HTML中的img、canvas或者是video元素。 具體的操作流程：首先通過image類，為HTML中的賦一個空的DOM對象。之后，將DOM對象的路徑屬性設(shè)置為選定的圖像路徑。就可以把選定的圖像加載到圖像元素中去了。在將圖像元素傳遞給drawImage方法之前，我們首先要確認，圖像是否已經(jīng)全部加載完成。如果沒有，是不能夠繼續(xù)進行后面的操作。我們可以使用jQuery中的load方法來判斷。4.2像素值訪問 像素的調(diào)整，能夠使我們得到完全不同的圖像效果

31、。通過訪問畫布中的像素點，我們就可以得到像素點的顏色及阿爾法值。當(dāng)然，我們還能夠改變對這些值，得到全新的圖片。 訪問像素點的方法是，這個方法的使用需要四個參數(shù)，前兩個分別是像素區(qū)域原點的橫縱坐標(biāo)，后兩個參數(shù)為訪問區(qū)域的長度值，和寬度值。具體的代碼如下： Context. getImageData(x,y,width,height);調(diào)用getImageData方法可以返回兩個值，有height、width,以及data .。其中height 和width不需要做過多的解釋。Data 包含著區(qū)域內(nèi)所有像素點的信息。我們通過一定的操作，改變像素點的信息值，就可以實現(xiàn)圖像的調(diào)整。在此，不做過多的詳細

32、介紹。4.3基本的圖像效果4.3.1反轉(zhuǎn)顏色 舉一個簡單的例子就可以說明什么是反轉(zhuǎn)顏色。假如現(xiàn)在某一像素點它的顏色值為155，那么得到的反轉(zhuǎn)顏色值就是255-155=100,4.3.2灰度我們想要把一張彩色張片變?yōu)楹诎讖埰涂梢岳没叶葋韺崿F(xiàn)。具體的原理是，我們需要計算出所有像素點的顏色值的平均值，即將顏色值相加，然后除以顏色的個數(shù)。之前，圖像中紅、綠、藍這三個顏色就采用剛才得到的顏色值。4.3.3像素化經(jīng)常在看新聞的時候，會發(fā)現(xiàn)一些人物的面部被像素化。像素化是一種非常強大的效果，它可以使圖像變得模糊，不可識別?？梢灾苯釉诋嫴忌现匦吕L制得到像素化效果。首先將圖像按照柵格分開，然后對每一個片段

33、取顏色的平均值，就可實現(xiàn)圖片的像素化。 5.用canvas制作基礎(chǔ)動畫5.1簡要概述 屏幕上的動畫實現(xiàn)原理：動畫其實是一連串差別微小的圖片連續(xù)快速播放的結(jié)果。因為播放的速度非?？欤搜鄹緹o法察覺。所以看上去就像是真實的物體或者人在運動。它的本質(zhì)是一個循環(huán)，即更新需要繪制的對象、清除布上的內(nèi)容、在畫布上重新繪制對象，如此循環(huán)往復(fù)。最終實現(xiàn)動畫效果。5.2圓周運動的實現(xiàn) 接下來要實現(xiàn)的動畫效果是沿著圓周的運動。具體來說，可以講圖形放在圓周的人一位置上。每一次循環(huán)，給圖形賦上不同的角度，就可以實現(xiàn)圓周的運動。代碼如下：var Shape=function(x,y,width,height)this

34、.x=x;this.y=y;this.width=width;this.height=height;this.radius=Math.random()*30;this.angle=0;代碼解釋：將動畫的起始角度設(shè)為0，圓周的半徑設(shè)為隨機的，但是半徑的值在030范圍內(nèi)。代碼：var x=tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180);var y=tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180);tmpShape.angle+=5;i

35、f(tmpShape.angle>360)tmpShape.angle=0;前面的兩行代碼，根據(jù)所給角度計算出圖像所在的坐標(biāo)位置，tmpShape.angle+=5;指出每次循環(huán)角度都增加5，if(tmpShape.angle>360)tmpShape.angle=0;起一個控制的作用，當(dāng)角度超過360度，就將其重置為0度。如果沒有這個判斷語句，當(dāng)角度大于360度，在計算其橫縱坐標(biāo)的時候，就會出錯。5.3 反彈效果的實現(xiàn)實現(xiàn)反彈的關(guān)鍵原理，就是讓運動著的圖像感受到邊界，之后改變運動的方向。首先，要實現(xiàn)的就是讓形狀感受到邊界。我們可以為實現(xiàn)動畫的每個循環(huán)中添加一個屬性值，沒循環(huán)一次，

36、這個屬性值都會增加特定的像素值。接下來，就需要添加一個判斷函數(shù)了，如果像素值大于畫布的長度，那么就改變形狀的運動方向。如果沒有，就讓形狀繼續(xù)向前運動。這就是反彈的原理。代碼如下：this.reverseX=false;this.reverseY=false;代碼解釋：在Shape中新增的兩個布爾屬性，用來判斷形狀是否碰到邊界。代碼：if(tmpShape.x<0)this.reverseX=false;else if(tmpShape.x+tmpShape.width>canvasWidth)this.reverseX=true;if(tmpShape.y<0)this.reverseY=false;else if(tmpShape.y+tmpShape.height>canvasHeight