HTML5前端開發(fā)培訓(xùn)_第1頁
HTML5前端開發(fā)培訓(xùn)_第2頁
HTML5前端開發(fā)培訓(xùn)_第3頁
HTML5前端開發(fā)培訓(xùn)_第4頁
HTML5前端開發(fā)培訓(xùn)_第5頁
已閱讀5頁,還剩206頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

1、HTML5前端開發(fā)培訓(xùn)前端開發(fā)培訓(xùn)我們從這里開始這里不是速成班結(jié)構(gòu)Structure表現(xiàn)Presentation行為BehaviorWeb標準Web標準不是某一個標準,而是一系列標準的集合XHTML&XMLHTMLCSSCSSDOM&ECMAScriptJavaScript各自職責(zé)HTML: 結(jié)構(gòu)&內(nèi)容CSS: 樣式JS: 結(jié)構(gòu)&內(nèi)容&樣式&動畫&交互各自職責(zé)發(fā)展演變HTML: 結(jié)構(gòu)&內(nèi)容&交互CSS: 樣式&動畫JS: 結(jié)構(gòu)&內(nèi)容&樣式&動畫&交互 HTML CSS JavaScript目錄HTML超文本標記語言Hyper Text Markup LanguageWeb應(yīng)用的基石發(fā)展簡史19

2、89 Tim Berners-Lee 發(fā)明HTML1993 第一款 瀏覽器“Mosaic”發(fā)布1994 W3C成立1997 HTML 3.21999 HTML4.012000 XHTML 1.02008 HTML5超文本標記語言HTML語法起始標記結(jié)束標記元素屬性內(nèi)容標題 內(nèi)容.基本結(jié)構(gòu)HEADBODY 與 之間的文本描述網(wǎng)頁 與 之間定義文檔的頭部 與 之間的文本是可見的頁面內(nèi)容Doctype文檔類型聲明 HTML4.0 & XHTML 1.1 HTML4.0 HTML5.0說明你用的說明你用的 的的XHTML或者或者 者者HTML是什么版本是什么版本向上向下兼容DOCTYPE的奇怪影響 t

3、itle頁面標題,而且必須唯一 meta提供有關(guān)頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞 link定義文檔與外部資源的關(guān)系 script定義文檔內(nèi)部的JavaScript style定義文檔內(nèi)部的CSSHead文件常用元素結(jié)構(gòu):p,div,span,h1h6,body列表:ul,ol,dl,li,dd,dt文本:a,em,strong,pre表單:form,input,button,label媒體:img,object表格:table,tr,td,caption,tbody元素分類行內(nèi)元素塊級元素嵌套規(guī)則元素分類 塊級元素(block)div、

4、p、h1h6、table、td、tr、ul、li、fieldset、legend.特點:在文檔流中默認占據(jù)整行位置 行內(nèi)元素(inline)span、en、strong、label、a、img、input、button、select.特點:在文檔流中默認一行可以展示多個行內(nèi)元素 嵌套規(guī)則塊級元素可以嵌套行內(nèi)元素,除a以外的行內(nèi)元素不能嵌套塊級元素語義化元素 header,footer section,article nav,aside,figure h1h6 ol,ul,dl table,tr,th,tdHTML5介紹語義化標簽語義化意義 增強頁面的可訪問性 提高開發(fā)效率 搜索引擎優(yōu)化SEO

5、id 唯一性 class 不再使用的屬性algin,bgcolor,background,color.元素通用屬性CSS定義 - 樣式與結(jié)構(gòu)分離書籍推薦 HTML CSS JavaScript目錄CSS層疊樣式表Cascading Style Sheets程序員的畫筆發(fā)展簡史1994 HakonWium Lie提出CSS概念1996 CSS Level 11997 CSSWorking Group1998 CSS Level 2CSS Level 3 進化中例如: p color:#ff0000;CSS語法 選擇器屬性值selectorproperty:value多個屬性之間采用分號分隔CSS

6、選擇器元素選擇器 h1類選擇器 .classnameid選擇器 #id全局選擇器 *繼承選擇器 div p分組選擇器 h1,h2偽類選擇器 :hover屬性選擇器 inputtype=button層疊樣式的優(yōu)先級 瀏覽器缺省設(shè)置 外部樣式表 內(nèi)部樣式表 標簽自定義樣式CSS優(yōu)先級CSS優(yōu)先級清除瀏覽器缺省樣式清除瀏覽器缺省樣式html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, a,code, em, img, q, small, strong, dd, dl,dt, li, ol, ul, f

7、ieldset, form, label, table,tbody, tr, th, td, input.reset.cssClass方式定義樣式CSS 盒子模型瀏覽器的盒模型與兼容性display:blockdisplay:inlinedisplay:inline-blockCSS 兼容問題源自哪里? 盒模型展示方式不同IE9+/FF/ChromeIE6-IE8 瀏覽器引擎本身的差異CSS 兼容問題源自哪里?CSS 兼容問題源自哪里? 瀏覽器本身BUG升級瀏覽器安裝補丁文件兼容Hack瀏覽器的盒模型與兼容性#box color:black; /*firefox*/color:red9; /*

8、所有IE*/*color:blue; /*IE7*/_color:green; /*IE6*/CSS Hack (樣式補丁)CSS瀏覽器兼容案例!-if!-if!-if!-if!-if IE 7 IE 8 IE 9 gt IE 9!IE!-漸進增強的CSS3 圓角 border-radius 漸變 gradient 過渡動畫 transition致友、點點、淘寶視覺設(shè)計師需要了解Web知識CSS3介紹CSS Sprites 優(yōu)點1.減少HTTP請求,降低服務(wù)器負擔2.文件體積更小 1+1 2 缺點1.開發(fā)/維護成本高2.擴展性差圖片合并提高Web性能書籍推薦 HTML CSS JavaScri

9、pt目錄JavaScript潛力無限的語言發(fā)展簡史1995 JavaScript 誕生1996 ECMAScript誕生1999 ECMAScript32009 ECMAScript5ECMAScriptHarmony 正在討論中應(yīng)用 - 客戶端應(yīng)用 - 服務(wù)端應(yīng)用 - 其他JavaScript 不是 Java語言特性 動態(tài)性 弱類型 基于對象 腳本語言動態(tài)性在一個Javascript對象中,要為一個屬性賦值,我們不必事先創(chuàng)建一個字段,只需要在使用的時候做賦值操作即可/定義一個對象var obj = new Object();/動態(tài)創(chuàng)建屬性 = an object;/動

10、態(tài)創(chuàng)建屬性sayHiobj.sayHi = function()return Hi;obj.sayHi();弱類型與Java,C/C+不同,Javascript 是弱類型的,它的數(shù)據(jù)類型無需在聲明時指定,解釋器會根據(jù)上下文對變量進行實例化/定義一個變量s字符串var s = text;print(s);/賦值s為整型s = 12+5;print(s);/賦值s為浮點型s = 6.3;print(s);/賦值s為一個對象s = new Object(); = object;Javascript中詭異的類型轉(zhuǎn)換基本數(shù)據(jù)類型 字符串(String) 數(shù)值(Number)在JavaScri

11、pt中,所有的數(shù)字,不論是整型浮點,都屬于“數(shù)值”基本類型。 布爾值(Boolean)var str = Hello, world;/字符串var i = 10;/整型數(shù)var f = 2.3;/浮點數(shù)var b = true;/布爾值對象類型 對象(屬性的集合,即鍵值的散列表) 數(shù)組(有序的列表) 函數(shù)(包含可執(zhí)行的代碼)var obj = new Object();obj.num = 2.3;var array = new Array(foo, bar, zoo);var func = function()print(I am a function here);類型比較 typeof -

12、基本類型返回一個用來表示表達式的數(shù)據(jù)類型的字符串。number,string,boolean,object,function, undefined instanceof - 對象類型返回一個 Boolean 值,指出對象是否是特定類的一個實例。obj instanceof Array;/falsearray instanceof Array;/truefunction add(x, y)return x + y;var add = function(x, y)return x + y;或函數(shù) 創(chuàng)建函數(shù)var funcName = new Function( argname1, . argnam

13、eN, body );var add = new Function(x, y, return(x+y);語法糖/調(diào)用屬性 或 objname/調(diào)用方法obj.sayHi()對象 JavaScript 是面向?qū)ο蟮木幊陶Z言 (OOP)。使我們有能力定義自己的對象和變量類型。注意:對象只是一種特殊的數(shù)據(jù)。對象擁有屬性和方法。/定義一個對象var obj = new Object();/屬性 = an object;/方法obj.sayHi = function()return Hi;容易忽略的JavaScript細節(jié)對象模板 模版定義了對象的結(jié)構(gòu)function B

14、ase()=an object;this.sayHi = function()return Hi;obj.sayHi()創(chuàng)建新的實例var obj = new Base();模版僅僅是一個函數(shù)。你需要在函數(shù)內(nèi)部向 pertiName 分配內(nèi)容。高級 原型對象(prototype) 作用域 (scope) 面向?qū)ο蟮腏avaScript 閉包深入理解JavaScript的閉包JS面向?qū)ο?1)簡單JS對象JS面向?qū)ο?2)簡單JS對象JSON JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。var obj = ;va

15、r arr = ;var obj = new Object();var arr = new Array();var obj = name: an object JSON 對象 屬性/ 值:JSON入門簡介開源框架/庫PrototypeMooToolsYUIExtJSJQueryKissy.JavaScript 框架介紹HTML5基礎(chǔ)培訓(xùn)HTML5基礎(chǔ)培訓(xùn)基礎(chǔ)培訓(xùn) HTML5概述1 HTML5的新特性2 HTML5的未來31. HTML5概述HTML5是一個新的網(wǎng)絡(luò)標準,現(xiàn)在仍處于發(fā)展階段。目標是取代現(xiàn)有的HTML4.01和XHTML1.0標準。它希望能夠減少互聯(lián)網(wǎng)富應(yīng)用(RIA)對Flash、

16、Silverlight、JavaFX等的依賴,并且提供更多能有效增強網(wǎng)絡(luò)應(yīng)用的API。廣義的HTML5包括HTML,CSS和JavaScript在內(nèi)的一套技術(shù)組合,其目標是減少瀏覽器對于插件的依賴,提供豐富的RIA(富客戶端)應(yīng)用。所以CSS3,SVG,WebGL,Touch事件,動畫支持等都屬于HTML5技術(shù)范圍HTML5時間表2004年 提出構(gòu)想2008年 發(fā)布第一份草案2012年 推廣階段2020年 最終測試2022年 正式發(fā)布2. HTML5的新特性語義離線存儲設(shè)備通用位置多媒體三維、圖形與特效性能與集成Web2.0帶來的豐富互聯(lián)網(wǎng)技術(shù)讓所有人都享受到了技術(shù)發(fā)展和體驗進步的樂趣。作為下

17、一代互聯(lián)網(wǎng)標準,HTML5自然也是備受期待和矚目,技術(shù)人員、設(shè)計者、互聯(lián)網(wǎng)愛好者們都在熱議HTML5究竟能帶來什么。那么就一起來窺探一下這個還未誕生就已經(jīng)聲名在外的新標準吧。2. HTML5的新特性 語義HTML5引入了新的HTML元素,通過使用這些元素,開發(fā)者可以更細致的描述文檔結(jié)構(gòu),讓文檔更加易讀,搜索引擎也能更好的理解頁面中各部分間的關(guān)系,我們也可以搜索到更快,更準確的信息。2. HTML5的新特性 多媒體Audio和Video是首批添加到HTML規(guī)范中的標簽。它們的加入使得我們可以像插入圖片一樣來處理音頻及視頻文件。2. HTML5的新特性 三維、圖形與特效基于SVG、Canvas、W

18、ebGL及CSS3的3D功能,用戶會驚嘆于在瀏覽器中,所呈現(xiàn)的驚人視覺效果。 var ctx = document.getElementById(canvas).getContext(2d); ctx.fillRect(20, 25, 150, 100); ctx.beginPath(); ctx.arc(220, 110, 100, Math.PI * 1/2, Math.PI * 3/2); ctx.lineWidth = 15; ctx.lineCap = round; ctx.strokeStyle = rgba(255, 127, 0, 0.5); ctx.stroke();2. H

19、TML5的新特性 離線存儲現(xiàn)在,web應(yīng)用的火爆已經(jīng)是不折不扣的現(xiàn)實,并且相對傳統(tǒng)的應(yīng)用,web應(yīng)用不需要安裝,所占空間小的特性使其具備傳統(tǒng)軟件應(yīng)用所不具備的優(yōu)勢,然而,目前制約web應(yīng)用最大的問題在于網(wǎng)絡(luò)連接不能夠無時無處。在飛機上,汽車上,火車上,有很多地方都無法被網(wǎng)絡(luò)信號所覆蓋,因此web應(yīng)用也就無法使用。HTML5的離線存儲使得這個問題迎刃而解。2. HTML5的新特性 離線存儲HTML5的webstorageAPI采用了離線緩存,會生成一個清單文件(manifestfile),這個清單文件實質(zhì)就是一系列的URL列表文件,這些URL分別指向頁面當中的HTML,CSS,Javascrpi

20、t,圖片等相關(guān)內(nèi)容。當使用離線應(yīng)用時,應(yīng)用會引入這一清單文件,瀏覽器會讀取這一文件,下載相應(yīng)的文件,并將其緩存到本地。使得這些web應(yīng)用能夠脫離網(wǎng)絡(luò)使用,而用戶在離線時的更改也同樣會映射到清單文件中,并在重新連線之后將更改返回應(yīng)用,工作方式與我們現(xiàn)在所使用的網(wǎng)盤有著異曲同工之處。2. HTML5的新特性 設(shè)備通用性從Geolocation功能的API文檔公開以來,HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇,帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連,例如視頻影音可直接與microphones及攝像頭相聯(lián)。

21、2. HTML5的新特性 位置這個大頭針圖標從2010年到2011年在各類應(yīng)用和互聯(lián)網(wǎng)上應(yīng)該是非?;鸨税桑繘]錯,就是地理位置,各處都可以看到人們在簽到,查找自己當前的地理位置和周邊。作為新標準的HTML5自然也不會置身事外,HTML5通過提供應(yīng)用接口GeolocationAPI,在用戶允許的情況下共享當前的地理位置信息,并為用戶提供其他相關(guān)的信息。3. HTML5的未來隨著網(wǎng)絡(luò)架構(gòu)的完善,寬帶提升,網(wǎng)速滿足實時交互需求時,計算機結(jié)構(gòu)也將發(fā)生變化,光驅(qū)消失,硬盤消失,內(nèi)存增大,GPU愈加重要,現(xiàn)在B/S結(jié)構(gòu)的應(yīng)用越來越多,而HTML5旨在富互聯(lián)網(wǎng)應(yīng)用,能夠改善B/S結(jié)構(gòu)應(yīng)用的用戶體驗,是互聯(lián)網(wǎng)

22、應(yīng)用的趨勢之一。面向未來互聯(lián)網(wǎng),基于“云+終端”的構(gòu)架,終端的HTML5的兼容解決方案必然會出現(xiàn),那時候你就可以全面擁抱HTML5了。HTML5表單 Day1 新增input輸入類型1 新增input屬性2 新增form元素3 新增form屬性41. 新增input輸入類型HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證: email-輸入郵件地址的文本框 url-輸入URL地址的文本框 number-輸入數(shù)字的文本框,可以設(shè)置范圍 range-通過滑動條改變一定范圍內(nèi)的數(shù)字 date-選擇日期(年、月、日、星期)的文本框 search-輸入搜索關(guān)鍵字操作的文本框 C

23、olor-顏色選擇器瀏覽器支持注釋:Opera對新的輸入類型的支持最好。不過您已經(jīng)可以在所有主流的瀏覽器中使用它們了。即使不被支持,仍然可以顯示為常規(guī)的文本域。Input typeIEFirefox OperaChromeSafariemailNo4.09.010.0NourlNo4.09.010.0NonumberNoNo9.07.0NorangeNoNo9.04.04.0DatepickersNoNo9.010.0NosearchNo4.011.010.0NocolorNoNo11.0NoNoEmail - 輸入郵件地址的文本框email類型用于應(yīng)該包含e-mail地址的輸入域。在提交表單

24、時,會自動驗證email域的值。實例:E-mail:url-輸入URL地址的文本框url類型用于應(yīng)該包含URL地址的輸入域。在提交表單時,會自動驗證url域的值。實例:Homepage:number-輸入數(shù)字的文本框number類型用于應(yīng)該包含數(shù)值的輸入域。您還能夠設(shè)定對所接受的數(shù)字的限定:實例:Points:number-輸入數(shù)字的文本框下面的屬性來規(guī)定對數(shù)字類型的限定:屬性值描述maxnumber規(guī)定允許的最大值minnumber規(guī)定允許的最小值stepnumber規(guī)定合法的數(shù)字間隔(如果step=3,則合法的數(shù)是-3,0,3,6等)valuenumber規(guī)定默認值range-通過滑動條改

25、變一定范圍內(nèi)的數(shù)字range類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range類型顯示為滑動條。您還能夠設(shè)定對所接受的數(shù)字的限定:實例:range-通過滑動條改變一定范圍內(nèi)的數(shù)字下面的屬性來規(guī)定對數(shù)字類型的限定:屬性值描述maxnumber規(guī)定允許的最大值minnumber規(guī)定允許的最小值stepnumber規(guī)定合法的數(shù)字間隔(如果step=3,則合法的數(shù)是-3,0,3,6等)valuenumber規(guī)定默認值date-選擇日期(年、月、日、星期)的文本框HTML5 擁有多個可供選取日期和時間的新輸入類型:date-選取日、月、年month-選取月、年week-選取周和年time-選取時間(小

26、時和分鐘)datetime-選取時間、日、月、年(UTC時間)datetime-local-選取時間、日、月、年(本地時間)date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Date:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Month:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Week:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Time:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Dateandtime:date-選擇日期(年、月、日、星期)的文本框?qū)嵗?Dateandtime:search-輸入搜索關(guān)鍵字操作的文本框search類型用于搜索域,比如站

27、點搜索或Google搜索。search域顯示為常規(guī)的文本域。search-輸入搜索關(guān)鍵字操作的文本框?qū)嵗篠earch:Color-顏色選擇器這是顏色選擇器控件,相當?shù)慕o力。使用很簡單。實例:Color:2. 新增input屬性HTML5的input標簽新增了很多屬性,也是讓大家非常興奮的一件事,用簡單的一個屬性搞定以前復(fù)雜的JS驗證。input新增的這些屬性,使得html和js的分工更明確了,使用起來十分舒暢。新增主要屬性如下: autoconmplete autofocus required placeholderautocompleteautocomplete可以賦值為on或者off。當

28、為on的時候,瀏覽器能自動存儲用戶輸入的內(nèi)容。當用戶返回到曾經(jīng)填寫過值的頁面的時候,瀏覽器能把用戶寫過的值自動填寫在相應(yīng)的input框里?,F(xiàn)在很多網(wǎng)站都實現(xiàn)了這個功能,不過基本都是用php來實現(xiàn)的。用了這個屬性,無疑可以減少很多前端和后臺的交流量和工作量。autoconmplete實例:Firstname:Lastname:E-mail:autofocusautofocus可以賦值為autofocus,也就是在頁面加載完成的時候自動聚焦到這個input標簽,自然type=hidden的時候是不能用的。這個也是一個比較常見的效果,至今為止的實現(xiàn)方法是用js。在頁面加載完時執(zhí)行聚焦操作,現(xiàn)在也被一

29、個屬性搞定了。可以想象,一個頁面至多只有一個input標簽會設(shè)置autofocus,否則必然不會達到預(yù)期效果。因為不可能同時聚焦在兩個input上。實例:Username:requiredinput的有一個強力新增屬性,免去驗證的麻煩??梢再x值為required。比如用戶注冊頁面的用戶名和密碼都是必填的,只要設(shè)置一個required就可以了。而在以前是需要js來驗證或者后臺驗證的。注意:這里required屬性是需要用戶來填寫的,所以Type是button、submit、reset、image等等不需要用戶填寫選擇的類型是不可以使用這個屬性的。實例:Name:placeholder這個新增屬性

30、也是非常使用,用在type=textemail等等類型的時候,提示用戶輸入信息的格式或者內(nèi)容等等。這個效果在之前也是需要js來實現(xiàn)的。是一種比較常見的效果。實例:3. 新增form元素HTML5主要新增的form元素如下: datalist keygen outputdatalistdatalist元素規(guī)定輸入域的選項列表。列表是通過datalist內(nèi)的option元素創(chuàng)建的。如需把datalist綁定到輸入域,請用輸入域的list屬性引用datalist的id。datalist實例:Webpage:keygenkeygen元素的作用是提供一種驗證用戶的可靠方法。keygen元素是密鑰對生成器

31、(key-pairgenerator)。當提交表單時,會生成兩個鍵,一個是私鑰,一個公鑰。私鑰(privatekey)存儲于客戶端,公鑰(publickey)則被發(fā)送到服務(wù)器。公鑰可用于之后驗證用戶的客戶端證書(clientcertificate)。目前,瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。實例:Encryption:outputoutput元素用于不同類型的輸出,比如計算或腳本輸出:實例:0100+=4. 新增form屬性HTML5主要新增的form屬性如下: autocomplete novalidateautocompleteautocomplete屬性規(guī)定fo

32、rm或input域應(yīng)該擁有自動完成功能。注釋:autocomplete適用于標簽,以及以下類型的標簽:text,search,url,telephone,email,password,datepickers,range以及color。當用戶在自動完成域中開始輸入時,瀏覽器應(yīng)該在該域中顯示填寫的選項:autocomplete實例:Firstname:Lastname:E-mail:novalidatenovalidate屬性規(guī)定在提交表單時不應(yīng)該驗證form或input域。注釋:novalidate屬性適用于以及以下類型的標簽:text,search,url,telephone,email,pa

33、ssword,datepickers,range以及color.實例:E-mail:課后作業(yè)1.熟悉html5的新特性2.運用所學(xué)的html5新增的輸入類型和屬性等制作一個完整的form表單。3.預(yù)習(xí)下節(jié)課的內(nèi)容html5畫布HTML5畫布 Day2&Day3 認識HTML5 Canvas元素1 繪制簡單圖形2 繪制貝塞爾曲線3 圖形變形4 圖形組合/剪切5 顏色樣式選項6 繪制文字7 操作和使用圖像81. 認識HTML5 Canvas元素HTML5最偉大之處在于引入了畫布Canvas。Canvas元素是為了客戶端點陣圖形而設(shè)計的,它本身沒有繪圖能力,但卻把一個繪圖API展現(xiàn)給客戶端JavaS

34、cript以使腳本能夠把想繪制的東西都繪制到一塊畫布上。本章通過下面幾點我們來初步認識一下HTML的canvas元素。什么是Canvas?創(chuàng)建Canvas元素操作Canvas元素理解坐標系統(tǒng)創(chuàng)建canvas元素用canvas標記在網(wǎng)頁上繪制圖形和圖像,首先需要在頁面中添加一個canvas元素作為畫布,并規(guī)定元素的id、寬度和高度。實例:上面的代碼在頁面中插入了一個透明的畫布,canvas元素內(nèi)部的內(nèi)容可以在不支持canvas功能的瀏覽器下顯示你想給你的用戶提供的信息。操作canvas元素canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在JavaScript內(nèi)部完成。實例:window.

35、onload=function()varvarcanvas=document.getElementById(myCanvas);varvarcontext=varcanvas.getContext(2d);/在此添加繪圖代碼varcontext.fillStyle=#FF0000;varcontext.fillRect(0,0,150,75);操作canvas元素JavaScript使用id來尋找canvas元素:varvarcanvas=document.getElementById(myCanvas);然后,創(chuàng)建context對象:varvarcontext=varcanvas.getCo

36、ntext(2d);getContext(2d)對象是內(nèi)建的HTML5對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪制一個紅色的矩形:varcontext.fillStyle=#FF0000;varcontext.fillRect(0,0,150,75);fillStyle方法將其染成紅色,fillRect方法規(guī)定了形狀、位置和尺寸。理解坐標系統(tǒng)上面的fillRect方法擁有參數(shù)(0,0,150,75)。意思是:在畫布上繪制150 x75的矩形,從左上角開始(0,0)。如下圖所示,畫布的X和Y坐標用于在畫布上對繪畫進行定位。2. 繪制簡單圖形認識了canvas元素

37、之后那么就讓我們在其上面進行繪畫一些簡單的圖形:。矩形線條圓形和弧形矩形canvas繪制矩形的方法:fillRect(x,y,width,height):參數(shù)x和y分別表示繪制的矩形的左上角頂點在頁面上的坐標值;參數(shù)weidth和height表示矩形的寬和高strokeRect(x,y,width,height):繪制四周產(chǎn)生描邊效果的矩形。實例:varcontext.fillRect(0,0,200,100);varcontext.strokeRect(50,500,100,100);線條我們可以通過起始坐標,和結(jié)束坐標,來繪制一條直線。實例:varline=document.getElem

38、entById(line);varc=line.getContext(2d);c.moveTo(20,20);c.lineTo(200,100);c.lineTo(20,100);c.stroke();線條moveTo(x,y):設(shè)置繪圖起始坐標。lineTo(x,y):從上一個起點到(x,y)的點畫線,上一個起點可以通過moveTo來指定,默認為原先路徑的終點。stroke():描邊路徑。注解:嘗試一下使用closePath()方法(在stroke()方法之前調(diào)用該方法,closePath()方法創(chuàng)建從當前點到開始點的路徑。),測試一下效果圓形和弧形我們可以通過規(guī)定尺寸、顏色和位置,來繪制一

39、個圓或者弧形。實例:varc=document.getElementById(circle);varr=c.getContext(2d);r.fillStyle=#ff0000;r.beginPath();r.arc(70,80,45,0,Math.PI*2,true);r.closePath();r.fill();圓形和弧形beginPath():創(chuàng)建路徑的第一步是調(diào)用beginPath方法,開始一條路徑,或重置當前的路徑。closePath():從當前的點到起始點閉合路徑。arc(x,y,radius,startAngle,endAngle,anticlockwise):(x,y)是圓弧的

40、圓心,radius-半徑,startAngle和endAngle是圓弧的開始和結(jié)束弧度(弧度=(Math.PI/180)*degree),anticlockwise為true的話是逆時針,否則為順時針。fillStyle:設(shè)置填充色。fill():填充路徑。圓形和弧形看看上圖中的外觀?;]有超過部分的一個假想的圓的周長。這個虛構(gòu)的循環(huán)可以被定義centerX,centerY,和半徑。接下來,我們可以定義沿所定義的虛圓的周長有兩個點的弧本身startingAngle和endingAngle。這兩個角度定義的弧度和形式來自圓心和虛線相交的弧線,我們希望創(chuàng)建兩端?;》椒ǖ淖詈笠粋€參數(shù)是逆時針,這是一

41、個可選的參數(shù),它定義的兩個結(jié)束點之間的ARC路徑的方向。除非另有規(guī)定,這種說法是默認為false,這將導(dǎo)致順時針要繪制弧。arc(x,y,radius,startAngle,endAngle,anticlockwise)方法圖解:3. 繪制貝塞爾曲線貝賽爾曲線的每一個頂點都有兩個控制點,用于控制在該頂點兩側(cè)的曲線的弧度。它是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。曲線的定義有四個點:起始點、終止點(也稱錨點)以及兩個相互分離的中間點。滑動兩個中間點,貝塞爾曲線的形狀會發(fā)生變化。二十世紀六十年代晚期,PierreBzier應(yīng)用數(shù)學(xué)方法為雷諾公司的汽車制造業(yè)描繪出了貝塞爾曲線。二次貝塞爾曲線quadra

42、ticCurveTo(cpx,cpy,x,y)/cpx,cpy表示控制點的坐標,x,y表示終點坐標;數(shù)學(xué)公式表示如下:二次方貝茲曲線的路徑由給定點P0、P1、P2的函數(shù)B(t)追蹤:二次貝塞爾曲線實例:/繪制起始點、控制點、終點context.beginPath();context.moveTo(20,170);context.lineTo(130,40);context.lineTo(180,150);context.stroke();/繪制2次貝塞爾曲線context.beginPath();context.moveTo(20,170);context.quadraticCurveTo(1

43、30,40,180,150);context.strokeStyle=red;context.stroke();三次貝塞爾曲線bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)/cp1x,cp1y表示第一個控制點的坐標,cp2x,cp2y表示第二個控制點的坐標,x,y表示終點的坐標;數(shù)學(xué)公式表示如下:P0、P1、P2、P3四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始于P0走向P1,并從P2的方向來到P3。一般不會經(jīng)過P1或P2;這兩個點只是在那里提供方向資訊。P0和P1之間的間距,決定了曲線在轉(zhuǎn)而趨進P3之前,走向P2方向的“長度有多長”。三次貝塞爾曲線實

44、例:/繪制起始點、控制點、終點context.beginPath();context.moveTo(25,175);context.lineTo(60,80);context.lineTo(150,30);context.lineTo(170,150);context.stroke();/繪制3次貝塞爾曲線context.beginPath();context.moveTo(25,175);context.bezierCurveTo(60,80,150,30,170,150);context.strokeStyle=red;context.stroke();4. 圖形變形首先說在前頭,Canv

45、as的變形,是“畫面”的位移,縮放和旋轉(zhuǎn),而不是畫布。畫布是指canvas,但畫面是指canvas的Context2d對象,他們千萬不能混淆。畫面的位移縮放和旋轉(zhuǎn),即畫布不變,而把畫布上的那一層“畫”給進行變化。平移translate縮放scale旋轉(zhuǎn)rotate平移 - translate大家應(yīng)該了解canvas有個“原點”,即坐標(0,0)的位置,一般是畫布的左上角。translate的作用就是把這個“原點”到處移動,他的語法是我們很熟悉的translate(x,y)形式,但他和moveTo方法毫無相同。當原點變化時,畫面的一切都會發(fā)生偏移。context.translate(x,y)x:

46、坐標原點向x軸方向平移xy:坐標原點向y軸方向平移y平移 - translate實例:context.fillStyle=red;/繪制起始點、控制點、終點context.fillRect(0,0,50,50);/平移context.translate(100,100);context.fillRect(0,0,50,50);context.translate(100,100);context.fillRect(0,0,50,50);縮放 - scale縮放是很容易理解的概念,但在canvas中縮放要記住:縮放是基于“原點”進行的。scale也經(jīng)常與translate搭配使用。scale接受兩

47、個參數(shù),依次是水平方向的縮放和垂直方向的縮放。參數(shù)可以是小數(shù),如果小于1就是縮小,大于1則是放大等于1則什么都不做。context.scale(x,y)x:x坐標軸按x比例縮放y:y坐標軸按y比例縮放縮放 - scale實例:context.fillStyle=red;/繪制起始點、控制點、終點context.fillRect(0,0,50,50);/平移context.translate(100,100);context.scale(1,2);/x坐標不縮放,y坐標變成2倍context.fillRect(0,0,50,50);旋轉(zhuǎn) - rotate旋轉(zhuǎn)也是一個很好理解的概念,而且旋轉(zhuǎn)也是基

48、于原點進行的。rotate接受一個表示度數(shù)的參數(shù)而且是弧度。context.rotate(angle)angle:坐標軸旋轉(zhuǎn)x角度(角度變化模型和畫圓的模型一樣)旋轉(zhuǎn) - rotate實例:context.fillStyle=red;/繪制起始點、控制點、終點context.fillRect(0,0,50,50);/平移context.translate(100,100);/旋轉(zhuǎn)45度,默認是順時針context.rotate(Math.PI/4);context.fillRect(0,0,50,50);課后作業(yè)1.繪制右側(cè)的餅狀圖:2.用貝塞爾曲線畫出右側(cè)氣泡框:5. 圖形組合/剪切圖形組合

49、就是兩個圖形相互疊加了圖形的表現(xiàn)形式,是后畫的覆蓋掉先畫的呢,還是相互重疊的部分不顯示等等。剪切就是從原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區(qū)域,則所有之后的繪圖都會被限制在被剪切的區(qū)域內(nèi)。(不能訪問畫布上的其他區(qū)域)圖形組合圖形組合context.globalCompositeOperation=typetype:source-over(默認值):在原有圖形上繪制新圖形destination-over:在原有圖形下繪制新圖形source-in:顯示原有圖形和新圖形的交集,新圖形在上,所以顏色為新圖形的顏色destination-in:顯示原有圖形和新圖形的交集,原有圖形在上,所以顏色為

50、原有圖形的顏色source-out:只顯示新圖形非交集部分destination-out:只顯示原有圖形非交集部分source-atop:顯示原有圖形和交集部分,新圖形在上,所以交集部分的顏色為新圖形的顏色destination-atop:顯示新圖形和交集部分,新圖形在下,所以交集部分的顏色為原有圖形的顏色lighter:原有圖形和新圖形都顯示,交集部分做顏色疊加xor:重疊飛部分不現(xiàn)實copy:只顯示新圖形圖形組合文字看得人眼花繚亂,特意畫圖一張:圖形剪切圖形剪切context.clip()實例:varc=document.getElementById(myCanvas);varctx=c.

51、getContext(2d);/剪切矩形區(qū)域ctx.rect(50,20,200,120);ctx.stroke();ctx.clip();/在clip()之后繪制綠色矩形ctx.fillStyle=green;ctx.fillRect(0,0,150,100);6. 顏色樣式選項前面的內(nèi)容我們只用到了默認的線條和填充樣式。而在這一節(jié),我們將會探討canvas可選項,來繪制出更加吸引人的內(nèi)容。色彩Colors:如果我們想要給圖形上色,有兩個重要的屬性可以做到:fillStyle和strokeStyle。透明度Transparency:除了可以繪制實色圖形,我們還可以用canvas來繪制半透明的

52、圖形。通過設(shè)置globalAlpha屬性或者使用一個半透明顏色作為輪廓或填充的樣式。線型Linestyles:可以通過一系列屬性來設(shè)置線的樣式。漸變Gradients:就好像一般的繪圖軟件一樣,我們可以用線性或者徑向的漸變來填充或描邊。色彩 Colors如果我們想要給圖形上色,有兩個重要的屬性可以做到:fillStyle和strokeStyle。fillStyle=colorstrokeStyle=colorstrokeStyle是用于設(shè)置圖形輪廓的顏色,而fillStyle用于設(shè)置填充顏色。color可以是表示CSS顏色值的字符串,漸變對象或者圖案對象。默認情況下,線條和填充顏色都是黑色(C

53、SS顏色值#000000)。/這些fillStyle的值均為橙色ctx.fillStyle=orange;ctx.fillStyle=#FFA500;ctx.fillStyle=rgb(255,165,0);ctx.fillStyle=rgba(255,165,0,1);色彩 Colors實例:varvarcontext=canvas.getContext(2d);/設(shè)置填充顏色varcontext.fillStyle=#FF0000;varcontext.fillRect(0,0,150,75);/設(shè)置輪廓顏色varcontext.strokeStyle=#0000ff;varcontext

54、.strokeRect(200,200,151,76);透明度 TransparencyCanvas的透明度globalAlpha屬性影響到canvas元素內(nèi)所有圖形的透明度,在需要繪制大量擁有相同透明度的圖形時,這個屬性相當高效。其有效值的范圍是0.0(完全透明)到1.0(完全不透明),默認值是1.0。不過,一般情況下,由于strokeStyle和fillStyle屬性接受符合CSS3規(guī)范的顏色值,所以使用CSS3的rgba()來分別設(shè)置具有透明度的填充顏色和輪廓顏色的情況比較多,也具有更好的可操作性和使用彈性。透明度 Transparency實例:ctx.fillStyle=red;ctx

55、.fillRect(20,20,75,50);/調(diào)節(jié)透明度ctx.globalAlpha=0.2;ctx.fillStyle=blue;ctx.fillRect(50,50,75,50);ctx.fillStyle=green;ctx.fillRect(80,80,75,50);同學(xué)們可以試著用使用css的rgba()來做這個例子ctx.fillStyle=rgba(255,0,0,0.5);線型 Line stylescanvas通過下面的一系列屬性來設(shè)置線的樣式。屬性屬性描述描述lineCap設(shè)置或返回線條的結(jié)束端點樣式lineJoin設(shè)置或返回兩條線相交時,所創(chuàng)建的拐角類型lineWid

56、th設(shè)置或返回當前的線條寬度miterLimit設(shè)置或返回最大斜接長度lineCap值值描述描述butt默認。向線條的每個末端添加平直的邊緣。round向線條的每個末端添加圓形線帽。square向線條的每個末端添加正方形線帽。實例(繪制圓形的結(jié)束線帽):ctx.beginPath();ctx.lineCap=round;ctx.moveTo(20,20);ctx.lineTo(20,200);ctx.stroke();lineJoin值值描述描述bevel創(chuàng)建斜角。round創(chuàng)建圓角。miter默認。創(chuàng)建尖角。實例(當兩條線條交匯時,創(chuàng)建圓形邊角):ctx.beginPath();ctx.li

57、neJoin=round;ctx.moveTo(20,20);ctx.lineTo(100,50);ctx.lineTo(20,100);ctx.stroke();lineWidth值值描述描述number當前線條的寬度,以像素計。實例(用寬度為10像素的線條來繪制矩形:):ctx.lineWidth=10;ctx.strokeRect(20,20,80,100);漸變 Gradientscanvars漸變是指在顏色集上使用逐步抽樣算法,并將結(jié)果應(yīng)用于描邊樣式和填充樣式中。Canvars漸變主要包括線性漸變和徑向漸變。所謂線性漸變,是指從開始地點到結(jié)束地點,顏色呈直線的徐徐變化的效果。徑向漸變

58、,其實就是環(huán)形的漸變了,由圓心(或者是較小的同心圓)開始向外擴散漸變的效果,聽著有些抽象,往線性漸變指定了起點和終點,徑向漸變則指定了開始的結(jié)束園的圓心和半徑。線性漸變createLinearGradient()方法用來創(chuàng)建線性的漸變對象。漸變可用于填充矩形、圓形、線條、文本等等。語法:context.createLinearGradient(x0,y0,x1,y1);參數(shù)值:參數(shù)描述x0漸變開始點的x坐標y0漸變開始點的y坐標x1漸變結(jié)束點的x坐標y1漸變結(jié)束點的y坐標線性漸變實例(繪制一個矩形,并用放射狀/圓形漸變進行填充):varc=document.getElementById(myC

59、anvas);varctx=c.getContext(2d);vargrd=ctx.createRadialGradient(75,50,5,90,60,100);/使用addColorStop方法指定各個位置的顏色grd.addColorStop(0,red);grd.addColorStop(1,white);/Fillwithgradientctx.fillStyle=grd;ctx.fillRect(10,10,150,100);徑向漸變createLinearGradient()方法用來創(chuàng)建放射狀/圓形漸變對象。漸變可用于填充矩形、圓形、線條、文本等等。語法:context.crea

60、teRadialGradient(x0,y0,r0,x1,y1,r1);參數(shù)值:參數(shù)描述x0漸變的開始圓的x坐標y0漸變的開始圓的y坐標r0開始圓的半徑x1漸變的結(jié)束圓的x坐標y1漸變的結(jié)束圓的y坐標r1結(jié)束圓的半徑徑向漸變實例(定義一個從黑到紅再到白的漸變,作為矩形的填充樣式:):varc=document.getElementById(myCanvas);varctx=c.getContext(2d);varmy_gradient=ctx.createLinearGradient(0,0,170,0);/使用addColorStop方法指定各個位置的顏色my_gradient.addCol

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論