基于HTML5 Canvas的畫圖板設(shè)計(jì)實(shí)現(xiàn)分析

-.z..--可修編-摘要Web2.0帶來的豐富互聯(lián)網(wǎng)技術(shù)讓所有人都享受到了技術(shù)開展和體驗(yàn)進(jìn)步的樂趣。而作為下一代互聯(lián)網(wǎng)標(biāo)準(zhǔn)，HTML5自然也是備受期待和矚目。HTML5是近十年來Web開發(fā)標(biāo)準(zhǔn)巨大的飛躍。和以前的版本不同，HTML5并非僅僅用來表示W(wǎng)eb容，它的新使命是將Web帶入一個成熟的應(yīng)用平臺，在HTML5平臺上，視頻、音頻、圖象、動畫，以及同電腦的交互都被標(biāo)準(zhǔn)化?，F(xiàn)階段對于HTML5技術(shù)的研發(fā)和開發(fā)工作主要集中在技術(shù)草案確實(shí)立與新互聯(lián)網(wǎng)應(yīng)用的開發(fā)上，而隨著互聯(lián)網(wǎng)的開展，HTML標(biāo)準(zhǔn)也在不斷變化，HTML標(biāo)準(zhǔn)已經(jīng)走過第4代了，因?yàn)樗軌蛴煤唵蔚臉?biāo)簽元素，代替屬性能實(shí)現(xiàn)之前需要用很多復(fù)雜JavaScript代碼才能有實(shí)現(xiàn)的功能，HTML5越來越受到歡送。HTML5帶來很多令人沖動的新特性，這在之前的HTML中是不可見到的。其中一個最值得提及的特性就是用于繪畫的HTMLCanvas，可以對2D或位圖進(jìn)展動態(tài)、腳本的渲染。本文詳細(xì)分析了HTML5技術(shù)的簡介和開展前景，并深入探討了HTML5引入的核心標(biāo)簽Canvas元素，介紹了Canvas可以實(shí)現(xiàn)的主要功能，在此根底上實(shí)現(xiàn)了局部類似Windows畫圖板的功能，包括鉛筆、圖章仿制、畫直線、圓、矩形、橡皮擦、背景圖、取色板、插入文字等功能，在實(shí)現(xiàn)過程中也利用了最新的CSS3技術(shù)，最后再次總結(jié)了這次畢設(shè)的經(jīng)歷和對未來的展望。本文針對其引入的Canvas繪圖元素進(jìn)展了深入的研究，此元素可以替代畫圖作為動畫渲染的工具，效率與平安性更高，開發(fā)更便捷，必將是以后的動畫，游戲等應(yīng)用首選的開發(fā)方式，前景非常好。【關(guān)鍵詞】Web2.0HTML5CSS3Canvas-.z..--可修編-ABSTRACTWeb2.0bringsawealthofInternettechnologyforalltoenjoythefunoftechnologydevelopmentande*perienceprogress.Asane*t-generationInternetstandard,HTML5isnaturallyhighlyanticipatedandattention.HTML5isahugeleapoverthepastdecadeWebdevelopmentstandards.Unlikethepreviousversion,HTML5isnotjustusedtorepresentWebcontent,itsnewmissionistheWebintoafull-fledgedapplicationplatform,HTML5platform,video,audio,image,animation,andinteractionwiththeputerbestandardized.AtthisstagefortheHTML5technologyanddevelopmentworkfocusedontheestablishmentofthedrafttechnologyandnewInternetapplicationdevelopment,HTMLstandardsarechangingwiththedevelopmentoftheInternet,HTMLstandardhasgonethroughfourgenerations,becauseitsimplelabelelements,insteadofbeforethepropertycanberealizedwithalotofple*JavaScriptcodeinordertoachievethefunctions,HTML5hasbeenmorepopular.HTML5bringsalotofe*citingnewfeatures.ThisisnotseeninthepreviousHTML.OneofthemostworthmentioningthecharacteristicsisHTMLCanvasforpainting,2Dorbitmaprenderingofdynamicscript.IdetailedanalysistheHTML5technologyintroductionanddevelopmentprospects,adeeperlookintothecoreoftheintroductionofHTML5tagCanvaselement,theCanvascanbeachieved,basedontheasimilarWindowsdrawingboard,includingpencil,stampimitation,drawastraightline,circle,rectangle,eraser,backgroundimage,takeaswatchintherealizationoftheprocessalsotakesadvantageofthelatestCSS3techniquesand,finally,thispletesetupe*perienceandvisionforthefuture.ThispaperintroducestheCanvasdrawingelementswhichconductedresearch,thiselementcanreplacethedrawingasatoolforanimationrendering,higherefficiencyandsecurity,thedevelopmentofmoreconvenient,bethefutureanimation,gamesandotherapplicationdevelopmentmethodofchoice,theoutlookisverygood.【Keywords】WEB2.0HTML5CSS3Canvas-.z.目錄TOC\o"1-3"\h\u18110前言13774第一章關(guān)于HTML5和畫圖板220662第一節(jié)HTML5簡介219417第二節(jié)HTML5特性210877第三節(jié)HTML5國外開展現(xiàn)狀39429第四節(jié)畫圖工具48116第二章相關(guān)技術(shù)簡介511092第一節(jié)Canvas元素簡介59703第二節(jié)第一個Canvas程序的實(shí)現(xiàn)526435第三節(jié)JavaScript及jQuery簡介713216第四節(jié)CSS3簡介929225第五節(jié)開發(fā)工具DreamWeaver介紹123297第六節(jié)調(diào)試工具Firefo*及Firebug簡介1313868第三章功能設(shè)計(jì)166307第一節(jié)需求設(shè)計(jì)1613865第二節(jié)根本原理1712040第三節(jié)布局及界面設(shè)計(jì)1912168第四節(jié)JavaScript設(shè)計(jì)203682第四章功能的實(shí)現(xiàn)2111190第一節(jié)簡單功能的實(shí)現(xiàn)2121828第二節(jié)前臺顯示實(shí)現(xiàn)241643第三節(jié)JavaScript畫圖實(shí)現(xiàn)254656第四節(jié)最終效果3222311第五節(jié)缺乏之處3815776第五章完畢語3924457致4022913參考文獻(xiàn)4128014附錄42-.z.前言隨著互聯(lián)網(wǎng)時(shí)代的高速開展，上網(wǎng)早已經(jīng)成為人民日常生活中一個必不可少的局部，人們可以在網(wǎng)絡(luò)上獲取信息，甚至于在網(wǎng)絡(luò)上完成日常的正常生活?？葱侣?，看電視，訂餐等等。HTML的上個版本早在1999年制定，隨著21世紀(jì)網(wǎng)絡(luò)的不斷開展，已經(jīng)不能適應(yīng)當(dāng)前的需求，于是HTML5營運(yùn)而生了。HTML5是HTML下一個的主要修訂版本，以期能在互聯(lián)網(wǎng)應(yīng)用迅速開展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)到達(dá)符合當(dāng)代的網(wǎng)絡(luò)需求，現(xiàn)仍處于開展階段。它希望能夠減少瀏覽器對豐富性網(wǎng)絡(luò)應(yīng)用效勞的插件的需要，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。HTML5的出現(xiàn)再次告訴我們，我們的生活，日常辦公，越來越有可能全在網(wǎng)頁端實(shí)現(xiàn)了。如今很多人喜歡在電腦上繪圖，畫圖版作為一個日常的生活工具，如今也能在我們網(wǎng)頁端實(shí)現(xiàn)了。HTML5一個很有用實(shí)用的特性是用于繪畫的Canvas元素，Canvas擁有許多繪制功能如畫筆、矩形、圓形、字符以及圖像處理的方法，他為人們在網(wǎng)頁繪圖及圖像處理帶來了方便。第一章關(guān)于HTML5和畫圖板第一節(jié)HTML5簡介HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動Web標(biāo)準(zhǔn)化運(yùn)動的開展，一些公司聯(lián)合起來，成立了一個叫做WebHyperte*tApplicationTechnologyWorkingGroup〔Web超文本應(yīng)用技術(shù)工作組，WHATWG〕的組織。WHATWG致力于Web表單和應(yīng)用程序，而W3C〔WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟〕專注于*HTML2.0。在2006年，雙方?jīng)Q定進(jìn)展合作，來創(chuàng)立一個新版本的HTML。HTML5草案的前身名為WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍處于完善之中。然而，大局部現(xiàn)代瀏覽器已經(jīng)具備了*些HTML5支持。2012年12月17日，萬維網(wǎng)聯(lián)盟〔W3C〕正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石。〞支持HTML5的瀏覽器包括Firefo*〔火狐瀏覽器〕，IE9及其更高版本，Chrome〔谷歌瀏覽器〕，Safari，Opera等；國的傲游瀏覽器〔Ma*thon〕，以及基于IE所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。HTML5提供了一些新的元素和屬性，例如<nav>〔導(dǎo)航塊〕和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如<audio>和<video>標(biāo)記。第二節(jié)HTML5特性一、取消了一些過時(shí)的HTML4標(biāo)記其中包括純粹顯示效果的標(biāo)記，如<font>和<center>，它們已經(jīng)被CSS取代。新的HTML5吸取了*HTML2一些建議，包括一些用來改善文檔構(gòu)造的功能，比方，新的HTML標(biāo)簽header,footer,dialog,aside,figure等的使用，將使容創(chuàng)作者更加語義地創(chuàng)立文檔，之前的開發(fā)者在實(shí)現(xiàn)這些功能時(shí)一般都是使用DIV。二、將容和展示別離b和i標(biāo)簽依然保存，但它們的意義已經(jīng)和之前有所不同，這些標(biāo)簽的意義只是為了將一段文字標(biāo)識出來，而不是為了為它們設(shè)置粗體或斜體式樣。u，font，center，strike這些標(biāo)簽則被完全去掉了。三、一些全新的表單輸入對象包括日期，URL，Email地址，其它的對象則增加了對非拉丁字符的支持。HTML5還引入了微數(shù)據(jù)，這一使用機(jī)器可以識別的標(biāo)簽標(biāo)注容的方法，使語義Web的處理更為簡單?？偟膩碚f，這些與構(gòu)造有關(guān)的改良使容創(chuàng)立者可以創(chuàng)立更干凈，更容易管理的網(wǎng)頁，這樣的網(wǎng)頁對搜索引擎，對讀屏軟件等更為友好。四、全新的，更合理的Tag多媒體對象將不再全部綁定在object或embedTag中，而是視頻有視頻的Tag，音頻有音頻的Tag。五、本地?cái)?shù)據(jù)庫這個功能將嵌一個本地的SQL數(shù)據(jù)庫，以加速交互式搜索，緩存以及索引功能。同時(shí)，那些離線Web程序也將因此獲益匪淺。不需要插件的富動畫。六、Canvas對象將給瀏覽器帶來直接在上面繪制矢量圖的能力，這意味著用戶可以脫離Flash和Silverlight，直接在瀏覽器中顯示圖形或動畫。七、瀏覽器中的真正程序?qū)⑻峁〢PI實(shí)現(xiàn)瀏覽器的編輯，拖放，以及各種圖形用戶界面的能力。容修飾Tag將被剔除，而使用CSS。第三節(jié)HTML5國外開展現(xiàn)狀國市場支持HTML5標(biāo)準(zhǔn)的瀏覽器已經(jīng)從2010年的不到2%開展到2012年超過三成的比例，2013年這一比例將有望突破突破70%。越來越多PC瀏覽器開場重視并且支持HTML5開展的同時(shí)，HTML5也越來越受到移動互聯(lián)網(wǎng)的重視。相對于PC平臺而言，移動平臺一直是開發(fā)者更為關(guān)心的，因?yàn)橐苿悠脚_瀏覽器品種較少，版本也普遍集中在最新正式版。同時(shí)，由于移動設(shè)備的更新?lián)Q代速度要比PC更快，硬件支持和瀏覽器的狀況都要比PC平臺的狀況更好。移動平臺上主流的5款瀏覽器(iOSSafari6.0、AndroidBrowser4.1、OperaMobile12.1、ChromeforAndroid18.0、Firefo*forAndroid15.0)，目前對標(biāo)準(zhǔn)的支持度均高于60%。其中表現(xiàn)居首的是ChromeforAndroid，而支持度相對較低的Android系統(tǒng)自帶的瀏覽器AndroidBrowser對HTML5的支持度也在60%以上。此外，硬件加速促進(jìn)了HTML5標(biāo)準(zhǔn)的開展和應(yīng)用。在使用HTML5開發(fā)時(shí)，開發(fā)者經(jīng)常會談到的一個問題就是性能。使用HTML5動畫、Canvas、WebGL終究能否帶來更好的用戶體驗(yàn)，與其實(shí)際性能密不可分。目前國外主流瀏覽器均支持硬件加速，這對HTML5的開展無疑是個好消息。可以支持硬件加速的瀏覽器版本有：Chrome18+、Firefo*4+、IE9+、Safari5.1+、Opera12+。國的有360平安瀏覽器、搜狗瀏覽器以及QQ瀏覽器。手機(jī)系統(tǒng)情況也比擬樂觀，主流的智能手機(jī)系統(tǒng)iOS、Android以及WindowsPhone上的原生瀏覽器都已經(jīng)支持硬件加速。Android4.0+上的Chrome在硬件加速方面更是超越了原生瀏覽器的表現(xiàn)。2012年12月17日，W3C發(fā)布了HTML5以及Canvas2D兩個標(biāo)準(zhǔn)的完全定義版本，標(biāo)志著HTML5的標(biāo)準(zhǔn)已經(jīng)在趨向穩(wěn)定。在2013年，支持HTML5的PC瀏覽器將會有一個較大的增長。除Chrome、Firefo*之外，微軟推出的IE9、IE10對HTML5的支持度都大幅提升，相信HTML5大面積使用只是時(shí)間問題。此外，移動平臺的HTML5比PC平臺開展的更快。由于移動設(shè)備的更新?lián)Q代速達(dá)遠(yuǎn)遠(yuǎn)超過PC，而且硬件性能也能夠完全支持HTML5。許多大公司在HTML5Canvas開發(fā)上下足了功夫，2013年或成為HTML5更普及的一年。第四節(jié)畫圖工具畫圖板簡單靈巧，深得廣闊用戶的喜愛，其占用資源少、操作簡單、功能等特點(diǎn)為用戶的小型圖形開發(fā)工作帶來了很多便利。當(dāng)用戶要處理一些要求不是很高的工作時(shí)，可以利用畫圖的工具來完成，比方實(shí)現(xiàn)一些簡單的操作如畫直線，圖片，圖片圖片等功能。用過微軟Windows操作系統(tǒng)的人一定都對Windows自帶的畫圖板非常的熟悉。同圖像處理軟件界的“大哥大〞Photoshop比起來，它雖然不及Photoshop的功能強(qiáng)大、容豐富，但是作為Windows一直以來都帶的程序，它具有小巧玲瓏、簡單實(shí)用等其它繪圖軟件所不具備的優(yōu)點(diǎn)。同時(shí)它的風(fēng)格也被許多其它繪圖軟件所效仿。Windows畫圖程序一直伴隨著Windows各個版本，這個很簡單，幾乎沒有什么用處的程序擁有最根本的繪圖功能，很適合用來涂鴉。HTML5的Canvas對象使在線繪圖成為可能，雖然HTML5還遠(yuǎn)未成熟，但很多人已經(jīng)迫不及待地用它設(shè)計(jì)一些讓人驚嘆的應(yīng)用。第二章相關(guān)技術(shù)簡介第一節(jié)Canvas元素簡介Canvas元素最先由蘋果公司的Safari瀏覽器引入，后來Chrome和Firefo*也都支持了這一元素，目前該元素已被參加HTML5標(biāo)準(zhǔn)的草案，并且得到了所有主流瀏覽器的支持。HTML5的Canvas元素使用JavaScript在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，您可以控制其每一像素。Canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。向HTML5頁面添加Canvas元素并規(guī)定元素的ID、寬度和高度：<canvasid="mycanvas"width="200"height="100"></canvas>這樣就可創(chuàng)立Canvas元素。第二節(jié)第一個Canvas程序的實(shí)現(xiàn)<!DOCTYPEhtml><html><head><title>HTML5CanvasDemo</title></head><body><divstyle="margin-left:30p*;"><canvasid="mycanvasTag"width="400"height="400"style="background-color:blue;border:10p*yellowsolid"></canvas><br/><ahref="inde*.html">back</a></div></body></html>這個Canvas的寬度和高度均為400像素，邊框?yàn)辄S色，背景為藍(lán)色。Canvas上沒有任何實(shí)際繪圖。繪圖通過屬于Canvas的JavaScript方法完成。下面我們介紹下Canvas的方法：表2.1Canvas方法介紹方法用途getConte*t(conte*tId)公開在Canvas上繪圖需要的API。惟一〔當(dāng)前〕可用的conte*tID是2d。height設(shè)置Canvas的高度。默認(rèn)值是150像素。width設(shè)置Canvas的寬度。默認(rèn)值是300像素。createLinearGradient(*1,y1,*2,y2)創(chuàng)立一個線性漸變。起始坐標(biāo)為*1,y1，完畢坐標(biāo)為*2,y2。createRadialGradient(*1,y1,r1,*2,y2,r2)創(chuàng)立一個放射狀漸變。圓圈的起始坐標(biāo)是*1,y1，半徑為r1。圓圈的完畢坐標(biāo)為*2,y2，半徑為r2。addColorStop(offset,color)向一個漸變添加一個顏色停頓。顏色停頓〔colorstop〕是漸變中顏色更改發(fā)生的位置。offset必須介于0到1之間。fillStyle設(shè)置用于填充一個區(qū)域的顏色在這里就例如說，fillStyle='rgb(255,0,0)'.strokeStyle設(shè)置用于繪制一根直線的顏色在這里就例如說，fillStyle='rgb(255,0,0)'.fillRect(*,y,w,h)填充一個定位于*和y，寬度和高度分別為w和h的矩形。strokeRect(*,y,w,h)繪制一個定位于*和y，寬度和高度分別為w和h的矩形的輪廓。moveTo(*,y)將繪圖位置移動到坐標(biāo)*,y。lineTo(*,y)從繪圖方法完畢的最后位置到*,y繪制一條直線。Canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在JavaScript部完成：<scripttype="te*t/javascript">varc=document.getElementById("mycanvas");varc*t=c.getConte*t("2d");c*t.fillStyle="*FF0000";c*t.fillRect(0,0,150,75);</script>JavaScript使用ID來尋找Canvas元素：varc=document.getElementById("mycanvas");然后，創(chuàng)立conte*t對象：varc*t=c.getConte*t("2d");getConte*t("2d")對象是建的HTML5對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法，目前還沒有3d的對象。下面的兩行代碼繪制一個紅色的矩形：c*t.fillStyle="*FF0000";c*t.fillRect(0,0,150,75);fillStyle方法將方塊染成了紅色，fillRect則方法規(guī)定了形狀、位置和尺寸。相類似的就可以通過瀏覽器提供的根底方法，構(gòu)建出沖動人心的應(yīng)用。第三節(jié)JavaScript及jQuery簡介JavaScript是一種由Netscape的LiveScript開展而來的原型化繼承的面向?qū)ο蟮膭討B(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決效勞器端語言，比方Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當(dāng)時(shí)效勞端需要對數(shù)據(jù)進(jìn)展驗(yàn)證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有28.8kbps，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。于是Netscape的瀏覽器Navigator參加了JavaScript，提供了數(shù)據(jù)驗(yàn)證的根本功能。由于AJA*的出現(xiàn)，JavaScript的功能被越來越多的豐富，能做的事情也越來越多，是Web2.0時(shí)代的象征。一個完整的JavaScript實(shí)現(xiàn)是由以下3個不同局部組成的：核心〔ECMAScript〕、文檔對象模型〔DocumentObjectModel，簡稱DOM〕、瀏覽器對象模型〔BrowserObjectModel，簡稱BOM〕。JavaScript的一個重要功能就是面向?qū)ο蟮墓δ埽ㄟ^基于對象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方式進(jìn)展程序開發(fā)。jQuery是繼prototype之后又一個優(yōu)秀的JavaScript框架。它是輕量級的JS庫(壓縮后只有21k)，它兼容CSS3，還兼容各種瀏覽器〔IE6.0+,FF1.5+,Safari2.0+,Opera9.0+〕。jQuery使用戶能更方便地處理HTMLdocuments、events、實(shí)現(xiàn)動畫效果，并且方便地為提供AJA*交互。jQuery還有一個比擬大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的HTML頁面保持代碼和HTML容別離，也就是說，不用再在HTML里面插入一堆JS來調(diào)用命令了，只需定義id即可。如今，jQuery已經(jīng)成為最流行的JavaScript庫，在世界前10000個訪問最多的中，有超過55%在使用jQuery。jQuery包含以下特點(diǎn)：①動態(tài)特效；②異步的AJA*；③通過插件來擴(kuò)展；④方便的工具-例如瀏覽器版本判斷；⑤漸進(jìn)增強(qiáng)；⑥鏈?zhǔn)秸{(diào)用；⑦多瀏覽器支持InternetE*plorer6.0+、Opera9.0+、Firefo*2+、Safari2.0+、Chrome1.0+；jQuery庫是一個單獨(dú)的JavaScript文件，可以保存到本地或者效勞器直接引用，也可以從多個公共效勞器中選擇引用。有MediaTemple、Google、Microsoft等多家公司給jQuery提供CDN效勞，比擬常用的引用地址如下：<scripttype="te*t/javascript"src="aja*.googleapis./aja*/libs/jquery/1.8/jquery.min.js"></script>目前的版本是1.9.0〔截止2013年1月〕。最常使用的jQuery根底方法是.ready()方法：$(document).ready(function(){//scriptgoeshere});或者其簡寫：$(function(){//scriptgoeshere});當(dāng)DOM加載完就可以執(zhí)行〔比window.onload更早〕，在同一個頁面里可以屢次出現(xiàn).ready()。實(shí)例：為元素添加單擊事件，發(fā)生對象隱藏效果。<html><head><scripttype="te*t/javascript"src="jquery.js"></script><scripttype="te*t/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>Ifyouclickonme,Iwilldisappear.</p></body></html>結(jié)果：隱藏頁面的<p>標(biāo)簽。選擇器：jQuery使用sizzle引擎，支持CSS選取，*path選取等方式。以以下舉了幾個特征：$("p")選取全部<p>元素；$("ro")選取所有包含class為"intro"的<p>元素；$("*demo")選取id為"demo"的元素；$("[href]")選取所有帶有href屬性的元素；$("[href='*']")選取所有帶有href值等于"*"的元素；$("[href!='*']")選取所有帶有href值不等于"*"的元素；$("[href$='.jpg']")選取所有href值以".jpg"結(jié)尾的元素；$("[href^='/imgaes/']")選取所有href值以/imgaes/"開頭的元素；更多詳細(xì)信息請參見jQueryAPI的Selectors局部。事件處理：直接綁定指定事件，事件類型即方法名，支持click、focus、blur、submit等。$("*button").click(function(){//scriptgoeshere});用on來綁定事件，off來解綁事件，第一個參數(shù)為事件名，第二個參數(shù)為回調(diào)函數(shù)。1.7.2版本開場支持。$("*button").onclick(function(){//scriptgoeshere});在1.7.1或更早版本，需要用bind/unbind〔常規(guī)綁定〕，live/die〔預(yù)綁定〕來替代on/off。更多詳細(xì)信息請參見jQueryAPI的Events局部。動態(tài)特效：$("*msg").show("fast");$("*msg").hide("slow");$("*msg").fadeIn();$("*msg").fadeOut();以上代碼實(shí)現(xiàn)一個ID為Msg的jQuery對象的漸入和淡出。函數(shù)承受的參數(shù)除了快慢等，還可以接收整型，作為漸入或淡出的完成時(shí)間，單位為MS。更多詳細(xì)信息請參見jQueryAPI的Effects局部。第四節(jié)CSS3簡介CSS即層疊樣式表〔CascadingStylesheet〕。在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加準(zhǔn)確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同局部，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化開展的。以前的規(guī)作為一個模塊實(shí)在是太龐大而且比擬復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被參加進(jìn)來。這些模塊包括：盒子模型、列表模塊、超方式、語言模塊、背景和邊框、文字特效、多欄布局等。CSS3帶來無與倫比的頁面表現(xiàn)能力，而這些在以前只能靠圖片，多層的標(biāo)簽嵌套或者JS才能實(shí)現(xiàn)，現(xiàn)在只需要幾行CSS3就能實(shí)現(xiàn)，效率也比原來要高很多。一、布局Grid布局應(yīng)用很廣泛，最簡單的例子就是容的分欄顯示。對于這個布局復(fù)雜的三欄網(wǎng)頁來說，如果使用CSS3Grid布局的話，我們只需這樣寫：body{columns:3;column-gap:0.5in;}img{float:pagetopright;width:3gr;}其中，body局部聲明頁面為3欄，欄間距為0.5英寸；img中float屬性指明圖片浮動位置為頁面的右上角，而寬度為3個欄寬。只需這樣兩行CSS，就可以實(shí)現(xiàn)這個復(fù)雜布局。二、邊框border-color：控制邊框顏色，并且有了更大的靈活性，可以產(chǎn)生漸變效果；border-image：控制邊框圖象；border-corner-image：控制邊框邊角的圖象；border-radius：能產(chǎn)生類似圓角矩形的效果；三、背景background-origin：決定了背景在盒模型中的初始位置，提供了3個值，border,padding和content；border：控制背景起始于左上角的邊框；padding：控制背景起始于左上角的留白；content：控制背景起始于左上角的容；background-clip：決定邊框是否覆蓋住背景〔默認(rèn)是不覆蓋〕，提供了兩個值，border和padding；border：會覆蓋住背景；padding：不會覆蓋背景；background-size：可以指定背景大小，以象素或百分比顯示。當(dāng)指定為百分比時(shí)，大小會由所在區(qū)域的寬度、高度，以及background-origin的位置決定；multiplebackgrounds：多重背景圖象，可以把不同背景圖象只放到一個塊元素里。特性①圓角表格，對應(yīng)屬性：border-radius。②以往對網(wǎng)頁上的文字加特效只能用filter這個屬性，這次CSS3中專門制訂了一個加文字特效的屬性，而且不止加陰影這種效果。對應(yīng)屬性：font-effect。③豐富了對下劃線的樣式，以往的下劃線都是直線，這次可不一樣了，有波浪線、點(diǎn)線、虛線等等，更可對下劃線的顏色和位置進(jìn)展任意改變?！策€有對應(yīng)頂線和中橫線的樣式，效果與下劃線類似〕對應(yīng)屬性：te*t-underline-style，te*t-underline-color，te*t-underline-mode，te*t-underline-position。④在文字下點(diǎn)幾個點(diǎn)或打個圈以示重點(diǎn)，CSS3也開場參加了這項(xiàng)功能，這應(yīng)該在*些特定網(wǎng)頁上很有用。對應(yīng)屬性：font-emphasize-style和font-emphasize-position。五、顏色HSLcolors：除了支持RGB顏色外，還支持HSL〔色相、飽和度、亮度〕。以前一般都是作圖的時(shí)候用HSL色譜，但這樣一來會包括更多的顏色。H用度表示，S和L用百分比表示，比方HSL〔0,100%,50%〕。HSLAcolors：加了個不透明度〔Apacity〕，用0到1之間的數(shù)來表示，比方hsla〔0,100%,50%,0.2〕。Opacity：直接控制不透明度，用0到1之間的數(shù)來表示。RGBAcolors：和HSLAcolors類似，加了個不透明度。一直以來，瀏覽器的透明一直無法實(shí)現(xiàn)單純的顏色透明，每次使用alpha后就會把透明的屬性繼承到子節(jié)點(diǎn)上。換句話說，很難實(shí)現(xiàn)背景顏色透明而文字不透明的效果。直到RGBA顏色的出現(xiàn)這一切將成為現(xiàn)實(shí)。實(shí)現(xiàn)這樣的效果非常簡單，設(shè)置顏色的時(shí)候我們使用標(biāo)準(zhǔn)的RGBA〔〕單位即可，例如RGBA〔255,0,0,0.4〕這樣就出現(xiàn)了一個紅色同時(shí)擁有alpha透明為0.4的顏色。經(jīng)過測試Firefo*3.0、Safari3.2、Opera10都支持了RGBA單位。Resize：可以由用戶自己調(diào)整DIV的大小，有horizontal〔水平〕vertical〔垂直〕或者both〔同時(shí)〕，或者同時(shí)調(diào)整。如果再加上ma*-width或min-width的話還可以防止破壞布局。六、文字效果te*t-shadow：文字投影，可能是因?yàn)镸ACOS*的Safari瀏覽器開場支持投影才特意增加的。te*t-overflow：當(dāng)文字溢出時(shí)，用“…〞提示。包括ellipsis、clip、ellipsis-word、inherit，前兩個CSS2就有了，目前還是局部支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一個單詞，對中文意義不大，inherit可以繼承父級元素。七、選擇器CSS3增加了更多的CSS選擇器，可以實(shí)現(xiàn)更簡單但是更強(qiáng)大的功能，比方：nth-child()等。Attributeselectors：在屬性中可以參加通配符，包括^,$,*等；[att^=val]：表示開場字符是val的att屬性；[att$=val]：表示完畢字符是val的att屬性；[att*=val]：表示包含至少有一個val的att屬性。其它模塊：mediaqueries：感覺叫媒體選擇比擬適宜，可以為網(wǎng)頁中不同的對象設(shè)置不同的瀏覽設(shè)備比方可以為*一塊分別設(shè)置屏幕瀏覽樣式和手機(jī)瀏覽樣式，以前則只能設(shè)置整個網(wǎng)頁；multi-columnlayout：多列布局，讓文字以多列顯示，包括column-width、column-count、column-gap三個值；column-width：指定每列寬度；column-count：指定列數(shù)；column-gap：指定每列之間的間距；column-rule-color：控制列間的顏色；column-rule-style：控制列間的樣式；column-rule-width：控制列間的寬度；column-space-distribution：平均分配列間距。八、影響CSS3將完全向后兼容，所以沒有必要修改現(xiàn)在的設(shè)計(jì)來讓它們繼續(xù)運(yùn)作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實(shí)現(xiàn)新的設(shè)計(jì)效果〔譬如動態(tài)和漸變〕，而且可以很簡單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果〔比方說使用分欄〕。第五節(jié)開發(fā)工具DreamWeaver介紹DreamWeaver是個原本由Macromedia公司所開發(fā)的著名開發(fā)工具。它使用所見即所得的接口，亦有HTML編輯的功能。它現(xiàn)在有Mac和Windows系統(tǒng)的版本。隨Macromedia被Adobe收購后，Adobe也開場方案開發(fā)Linu*版本的Dreamweaver了。Dreamweaver自M*版本開場，使用了Opera的排版引擎"Presto"作為網(wǎng)頁預(yù)覽。Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁平安色。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dreamweaver能與您喜愛的設(shè)計(jì)工具，如PlaybackFlash，Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進(jìn)展編輯與設(shè)定圖檔的最正確化。Dreamweaver是唯一提供RoundtripHTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進(jìn)階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)展版面配置。所見即所得Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party廠商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango與自行開展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計(jì)動態(tài)網(wǎng)頁時(shí)，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。夢幻樣版和*MLDreamweaver將容與設(shè)計(jì)分開，應(yīng)用于快速網(wǎng)頁更新和團(tuán)隊(duì)合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，容提供者可直接編輯以樣式為主的容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出*ML容。全方位的呈現(xiàn)利用Dreamweaver設(shè)計(jì)的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺的熱門瀏覽器上。對于cascadingstylesheets的動態(tài)HTML支援和鼠標(biāo)換圖效果，聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時(shí)，只要從Dreamweaver的在下載它的描述檔，便可得知詳盡的成效報(bào)告。第六節(jié)調(diào)試工具Firefo*及Firebug簡介Firefo*〔火狐〕是一款著名的瀏覽器軟件，由美國Mozilla與開源團(tuán)體共同開發(fā)。Firefo*適用于Windows、Linu*和MacOS*平臺，它體積小速度快，主要特性有：自由開源、標(biāo)簽式瀏覽、平安保護(hù)、立體搜索等。Firefo*從發(fā)行初期就開場屢獲殊榮，下載數(shù)量持續(xù)增加，市場占有率不斷攀高。根據(jù)Netapplication調(diào)研的最新數(shù)據(jù)，到2012年10月份，F(xiàn)irefo*在全球的市場占有率到達(dá)19.99%。Firefo*在剛推出的時(shí)候是世界上最先進(jìn)的瀏覽器，當(dāng)時(shí)出現(xiàn)了很多網(wǎng)頁都只支持Firefo*瀏覽器，以至于其他瀏覽器為了適應(yīng)這些，直到現(xiàn)在，幾乎所有的UserAgent都以Mozilla/5.0開頭。Firebug是網(wǎng)頁瀏覽器MozillaFirefo*下的一款開發(fā)類插件，現(xiàn)屬于Firefo*的五星級強(qiáng)力推薦插件之一。它集HTML查看和編輯、JavaScript控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)JavaScript、CSS、HTML和AJA*的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面部的細(xì)節(jié)層面，給Web開發(fā)者帶來很大的便利。例如!的網(wǎng)頁速度優(yōu)化建議工具YSlow。Firebug也是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何的CSS、HTML、DOM以及JavaScript代碼。Firebug的CSS調(diào)試器是專為網(wǎng)頁設(shè)計(jì)師們量身定做的。如今的網(wǎng)頁設(shè)計(jì)言必稱DIV+CSS，如果你是用Table套出來的HTML頁面，就得按這規(guī)矩重構(gòu)一遍，否則顯得你不夠時(shí)髦！用DIV做出來的頁面確實(shí)能精簡HTML代碼，HTML標(biāo)簽減肥的結(jié)果就是CSS樣式表的編寫成了頁面制作的重頭戲。Firebug的CSS查看器不僅自下向上列出每一個CSS樣式表的附屬繼承關(guān)系，還列出了每一個樣式在哪個樣式文件中定義。你可以在這個查看器中直接添加、修改、刪除一些CSS樣式表屬性，并在當(dāng)前頁面中直接看到修改后的結(jié)果。也許有一天，你的老板或者客戶找到你，抱怨你制作的網(wǎng)頁速度奇慢，你該如何應(yīng)對？你或許會說這可能是網(wǎng)絡(luò)問題，或者是電腦配置問題，或者是程序太慢，或者直說是他們的人品問題？不管怎么說，最后你可能被要求去解決這個有多種可能的問題。網(wǎng)絡(luò)狀況監(jiān)視器能幫你解決這個棘手問題。Firebug的網(wǎng)絡(luò)監(jiān)視器同樣是功能強(qiáng)大的，它能將頁面中的CSS、JavaScript以及網(wǎng)頁中引用的圖片載入所消耗的時(shí)間以矩狀圖呈現(xiàn)出來，也許在這里你能一把揪出拖慢了你的網(wǎng)頁的元兇，進(jìn)而對網(wǎng)頁進(jìn)展調(diào)優(yōu)，最后老板滿意客戶歡喜，你的飯碗也因此而結(jié)實(shí)。Firebug的JavaScript調(diào)試器是一個很不錯的JavaScript腳本調(diào)試器，占用空間不大，但是單步調(diào)試、設(shè)置斷點(diǎn)、變量查看窗口一個不少。正所謂麻雀雖小，五臟俱全。如果你有一個已經(jīng)建成，然而它的JavaScript有性能上的問題或者不是太完美，可以通過面板上的Profile來統(tǒng)計(jì)每段腳本運(yùn)行的時(shí)間，查看到底是哪些語句執(zhí)行時(shí)間過長，一步步的來排除問題?？刂婆_能夠顯示當(dāng)前頁面中的JavaScript錯誤以及警告，并提示出錯的文件和行號，方便調(diào)試，這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細(xì)且具有參考價(jià)值。而且在調(diào)試AJA*應(yīng)用的時(shí)候也是特別有用，你能夠在控制臺里看到每一個*MLHttpRequests請求post出去的參數(shù)、URL，HTTP頭以及回饋的容，原本似乎在幕后黑匣子里運(yùn)作的程序被清清楚楚地展示在你面前。第一次看到Firebug強(qiáng)大的HTML代碼查看器，就覺得它與眾不同，相比于Firefo*自帶的HTML查看器，它的功能強(qiáng)大了許多。DOM(DocumentObjectModel)里頭包含了大量的Object以及函數(shù)、事件，在從前，你要想從中查到需要的容，絕非易事，這好比你去了一個巨大的圖書館，想要找到幾本名字不太確切的小書，眾多的選擇會讓你無所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的部構(gòu)造，幫助你快速定位DOM對象。雙擊一個DOM對象，就能夠編輯它的變量或值，編輯的同時(shí)，你可能會發(fā)現(xiàn)它還有自動完成功能，當(dāng)你輸入document.get之后，按下Tab鍵就能補(bǔ)齊為document.getElementById，非常方便。如果你認(rèn)為補(bǔ)齊得不夠理想，按下Shift+Tab會恢復(fù)原狀。用了Firebug的DOM查看器，你的JavaScript從此找到了驅(qū)使對象，Web開發(fā)也許就成了一件樂事。第三章功能設(shè)計(jì)網(wǎng)頁畫圖板主要用于根底繪畫、對圖片涂鴉等。總體的設(shè)計(jì)思路是在一個網(wǎng)頁中添加一個DIV層，然后在這個DIV層中添加Canvas元素作為他的根底畫板，再在此根底上實(shí)現(xiàn)畫圖工具功能〔例如鉛筆、放射線、直線、圓、矩形、取色器、線條大小、橡皮擦、文字等〕。點(diǎn)擊畫筆按鈕是自由繪畫狀態(tài)，可以用鼠標(biāo)自由繪畫；分別點(diǎn)擊直線、圓、矩形按鈕繪制出相應(yīng)的圖像；點(diǎn)擊取色器彈出一個浮動層，該浮動層中也包含一個Canvas元素，繪制出取色板的各種顏色，通過點(diǎn)擊取色器區(qū)域獲取各個顏色值。按下線條大小按鈕，可以用于設(shè)置線條的粗細(xì)值。第一節(jié)需求設(shè)計(jì)需求分析是一個軟件的根底。如果沒有正確的需求分析就不能做出滿意的軟件。所以可以說需求分析是一個軟件設(shè)計(jì)的靈魂。所以在任何系統(tǒng)的開發(fā)設(shè)計(jì)之前，都應(yīng)該進(jìn)展相應(yīng)的需求分析。需求分析的準(zhǔn)確度越高，開發(fā)出來的程序穩(wěn)靠性越強(qiáng)，所需的費(fèi)用將會越低。反過來呢，做出來的程序平安系數(shù)不高，還會額外增加開發(fā)費(fèi)用，造成人力物力資源的嚴(yán)重浪費(fèi)。而得不償失。我們作的是布局類似與Windows畫圖板，在設(shè)計(jì)時(shí)應(yīng)該考慮到用戶的需要和畫圖的習(xí)慣?？梢韵胂蟮氖?，用戶喜歡的是簡潔，方便并且具有實(shí)用性的畫圖板程序，所以我們需求分析的主要任務(wù)就是來了解用戶畫圖時(shí)的習(xí)慣。盡量讓用戶滿意。在此我們是先設(shè)計(jì)一個大概的程序模型讓別人試我的畫圖板。用這種方法我們收集到了用戶的畫圖習(xí)慣。并以此來設(shè)計(jì)自己的畫圖板。在通過對用戶的調(diào)查，對已經(jīng)知道的畫圖板程序的了解過后，這個系統(tǒng)所要實(shí)現(xiàn)的功能如下：①設(shè)置圖片url可讀取圖片并設(shè)置為當(dāng)前畫布的背景。②顏色選擇器：可以選擇繪畫使用的各種顏色。③粗細(xì)選擇器：可以選擇畫線的粗細(xì)。④鉛筆：可以跟隨鼠標(biāo)畫線。⑤直線：可以根據(jù)鼠標(biāo)拖動畫直線。⑥圓形：可以根據(jù)鼠標(biāo)拖動畫圓。⑦矩形：可以根據(jù)鼠標(biāo)拖動畫矩形。⑧放射形：可以根據(jù)鼠標(biāo)拖動畫出放射線。⑨仿制圖章：可以根據(jù)鼠標(biāo)拖動畫出相應(yīng)圖片。⑩取色器：可以獲取畫布中的顏色。畫圖板畫圖板路徑載入路徑載入翻開繪圖設(shè)置翻開繪圖設(shè)置畫筆顏色畫筆粗細(xì)畫筆畫筆顏色畫筆粗細(xì)畫筆直線矩形圓直線矩形圓橡皮擦放射線圖章橡皮擦放射線圖章圖3.1需求圖第二節(jié)根本原理畫圖板制作的根本原理是通過鼠標(biāo)點(diǎn)擊畫板坐標(biāo)完成的，以下圖是他的原理圖當(dāng)鼠標(biāo)按下時(shí)畫圖坐標(biāo)開場鼠標(biāo)移動畫圖圖3.2原理圖鼠標(biāo)松開完畢圖3.2原理圖鼠標(biāo)移動無效圖3.2原理圖第三節(jié)布局及界面設(shè)計(jì)畫圖板主要是為用戶提供根本畫圖工具。所以以提供用戶最需要的功能為目的。設(shè)計(jì)的性能如下：①讓用戶不管怎樣操作都能得到用戶的目的。爭取做到傻瓜都能用我的軟件。②實(shí)現(xiàn)了Windows畫圖板大局部功能，如：鉛筆、橡皮、直線、園、字體等功能。還能讓用戶選擇顏色等功能。③仿照Windows畫圖板，頁面分為三欄，上方為顏色選擇器，粗細(xì)選擇器；左欄為工具選擇區(qū)；右欄為畫布。圖3.3Window畫圖板布局采用DIV+CSS，工具按鈕使用CSS3技術(shù)，進(jìn)展圓角，高光，凹陷特效處理，畫布為Canvas元素，大小為600*450。第四節(jié)JavaScript設(shè)計(jì)通過JavaScript的onclick事件實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后的效果。通過JavaScript的onmousemove鼠標(biāo)拖動的效果。工具點(diǎn)擊事件：改變畫圖模式，按鈕樣式，顏色設(shè)定，筆觸設(shè)定等。畫布鼠標(biāo)點(diǎn)擊事件：假設(shè)是鉛筆則在當(dāng)前位置畫圖，假設(shè)為需要拖動的模式則設(shè)定初始點(diǎn)擊位置，待后續(xù)處理。畫布鼠標(biāo)拖動事件：假設(shè)是鉛筆則在當(dāng)前位置畫圖，假設(shè)為拖動的則在前背景畫出軌跡。畫布鼠標(biāo)抬起事件：假設(shè)為拖動則畫出當(dāng)前圖形。第四章功能的實(shí)現(xiàn)第一節(jié)簡單功能的實(shí)現(xiàn)一、實(shí)例-線條通過指定從何處開場，在何處完畢，來繪制一條線：圖4.1線條JavaScript代碼：<scripttype="te*t/javascript">varc=document.getElementById("myCanvas");varc*t=c.getConte*t("2d");//方法返回一個用于在畫布上繪圖的環(huán)境。c*t.moveTo(10,10);c*t.lineTo(150,50);c*t.lineTo(10,50);c*t.stroke();</script>Canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1p*solid*c3c3c3;">YourbrowserdoesnotsupporttheCanvaselement.</canvas>二、實(shí)例-圓形通過規(guī)定尺寸、顏色和位置，來繪制一個圓：圖4.2圓JavaScript代碼：<scripttype="te*t/javascript">varc=document.getElementById("myCanvas");varc*t=c.getConte*t("2d");c*t.fillStyle="*FF0000";c*t.beginPath();c*t.arc(70,18,15,0,Math.PI*2,true);//(坐標(biāo)，半徑，弧度)c*t.closePath();c*t.fill();</script>Canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1p*solid*c3c3c3;">YourbrowserdoesnotsupporttheCanvaselement.</canvas>三、實(shí)例-漸變使用您指定的顏色來繪制漸變背景：圖4.3漸變JavaScript代碼：<scripttype="te*t/javascript">varc=document.getElementById("myCanvas");varc*t=c.getConte*t("2d");vargrd=c*t.createLinearGradient(0,0,175,50);grd.addColorStop(0,"*FF0000");grd.addColorStop(1,"*00FF00");c*t.fillStyle=grd;c*t.fillRect(0,0,175,50);</script>Canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1p*solid*c3c3c3;">YourbrowserdoesnotsupporttheCanvaselement.</canvas>四、實(shí)例-圖像把一幅圖像放置到畫布上：圖4.4圖像引入JavaScript代碼：<scripttype="te*t/javascript">varc=document.getElementById("myCanvas");varc*t=c.getConte*t("2d");varimg=newImage()img.src="flower.png"c*t.drawImage(img,0,0);</script>Canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1p*solid*c3c3c3;">YourbrowserdoesnotsupporttheCanvaselement.</canvas>第二節(jié)前臺顯示實(shí)現(xiàn)圖4.5前臺效果圖頁面采用DIV+CSS進(jìn)展3欄的布局<!--*實(shí)現(xiàn)功能顏色選擇器*--><canvasid="canvas_color"width="198"height="15"style="border:1p*solid*999;margin-top:10p*;margin-left:10p*;float:left;"></canvas><canvasid="canvas"width="600"height="450"style="border:1p*solid*999;position:absolute;top:45p*;left:60p*;"></canvas><!--*前畫布，實(shí)現(xiàn)鼠標(biāo)軌跡跟蹤*--><canvasid="canvas2"width="600"height="450"style="border:1p*solid*999;position:absolute;top:45p*;left:60p*;"></canvas><!--*后畫板，即主要顯示畫布*-->其中顏色板也是一個Canvas，這里填充了一個全色系的BMP圖像，鼠標(biāo)拖動時(shí)動態(tài)取色值即可。通過設(shè)定陰影和高光局部顏色，從而實(shí)現(xiàn)了凸起和凹陷的效果，分別對應(yīng)普通和選中時(shí)的樣式。畫布為兩個重疊的Canvas，分為前景和后景，前景畫布重要用來顯示拖放畫筆的軌跡。第三節(jié)JavaScript畫圖實(shí)現(xiàn)一、頁面加載初始化初始化各個變量，用以后面調(diào)用document.ondragstart=function(){returnfalse;} //ie制止拖拽 document.onselectstart=function(){returnfalse;}//ie制止選定canvas_size={*:$("*canvas").width(),y:$("*canvas").height()};//畫板大小canvas_offset={*:$("*canvas")[0].offsetLeft,y:$("*canvas")[0].offsetTop};//偏移量origin={*:0,y:0}//起點(diǎn)end={*:0,y:0}//終點(diǎn)type=0;//默認(rèn)為鉛筆drawable=false;//畫開關(guān)color_changeable=false;//改變顏色開關(guān)canvas=document.getElementById("canvas");//后畫布canvas2=document.getElementById("canvas2");//前畫布conte*t=canvas.getConte*t('2d');//公開在Canvas上繪圖需要的API。惟一〔當(dāng)前〕可用的conte*tID是2d。conte*t.strokeStyle="*00aeef";//直線fill_canvas("*ffffff");//填充默認(rèn)色白色conte*t.lineWidth=1;//畫筆粗細(xì)conte*t2=canvas2.getConte*t('2d');conte*t2.strokeStyle="*00aeef";conte*t2.lineWidth=1;二、綁定事件1、綁定前景畫布事件$(canvas2).bind('mousedown',function(event){//鼠標(biāo)在畫布的圖像上取得像素的坐標(biāo) drawable=true; origin.*=event.client*-canvas_offset.*; origin.y=event.clientY-canvas_offset.y; if(type==7){//取色器varcanvas*=Math.floor(event.page*-canvas_offset.*);varcanvasY=Math.floor(event.pageY-canvas_offset.y);//獲得canvas整數(shù)坐標(biāo)〔下舍〕 varimageData=conte*t.getImageData(canvas*,canvasY,1,1);//這個方法有4個參數(shù)：要訪問的像素區(qū)域原點(diǎn)坐標(biāo)〔*，y〕、像素區(qū)域的寬度和高度varpi*el=imageData.data; $("*color_span").css("background-color","rgb("+pi*el[0]+","+pi*el[1]+","+pi*el[2]+")");//將獲取到的像素信息傳給變量 change_attr(-1,-1,"rgb("+pi*el[0]+","+pi*el[1]+","+pi*el[2]+")"); } }); $(canvas2).bind('mouseup',function(event){ canvas_backup=conte*t.getImageData(0,0,canvas.width,canvas.height); });2、綁定后景畫布事件$(document).bind('mouseup',function(event){ if((type==1||type==3||type==4)&&drawable==true){//直線、圓、矩形 conte*t2.clearRect(0,0,canvas_size.*,canvas_size.y);//清屏 end.*=event.client*-canvas_offset.*; end.y=event.clientY-canvas_offset.y; draw(conte*t); } drawable=false; color_changeable=false; });$(document).bind("mousemove",function(event){if(drawable==false)return;if(type==0){ end.*=event.client*-canvas_offset.*; end.y=event.clientY-canvas_offset.y; draw(conte*t); origin.*=end.*;origin.y=end.y;}elseif(type==1||type==3||type==4||type==5){ end.*=event.client*-canvas_offset.*; end.y=event.clientY-canvas_offset.y; if(type==5){//橡皮擦 fill_canvas('*ffffff',end.*-10,end.y-10,20,20);return; }else{ conte*t2.clearRect(0,0,canvas_size.*,canvas_size.y); draw(conte*t2);}elseif(type==2){//放射線 end.*=event.client*-canvas_offset.*; end.y=event.clientY-canvas_offset.y; draw(conte*t);}elseif(type==6){//圖章 if(!window.dateTime) window.dateTime=newDate(); if((newDate()-window.dateTime)>20){//設(shè)計(jì)延遲 window.dateTime=newDate(); conte*t.drawImage(heart,event.client*-canvas_offset.*-heart.width/2,event.clientY-canvas_offset.y-heart.height/2); } }});3、繪圖主函數(shù)functiondraw(conte*t){ if(type==0||type==1||type==2){//鉛筆，直線，放射線 conte*t.beginPath();//開場路徑 conte*t.moveTo(origin.*,origin.y);//將繪圖位置移動到坐標(biāo)*,y。 conte*t.lineTo(end.*,end.y);//從繪圖方法完畢的最后位置到*,y繪制一條直線。 conte*t.stroke();//讓線條顯示出來}elseif(type==3){//圓 vark=((end.*-origin.*)/0.75)/2,w=(end.*-origin.*)/2, h=(end.y-origin.y)/2, *=(end.*+origin.*)/2, y=(end.y+origin.y)/2; conte*t.beginPath(); conte*t.moveTo(*,y-h); conte*t.bezierCurveTo(*+k,y-h,*+k,y+h,*,y+h);//bezierCurveTo畫布中開場子路徑的一個新的集合。開場點(diǎn)、完畢點(diǎn)相關(guān)聯(lián)坐標(biāo);曲線完畢點(diǎn)坐標(biāo) conte*t.bezierCurveTo(*-k,y+h,*-k,y-h,*,y-h); conte*t.closePath(); conte*t.stroke();}elseif(type==4){//矩形 conte*t.beginPath(); conte*t.rect(origin.*,origin.y,end.*-origin.*,end.y-origin.y);//矩形〔后大小〕 conte*t.stroke();}elseif(type==6){//圖章 conte*t.drawImage(heart,origin.*,origin.y); }elseif(type==8){//文本 conte*t.font=$("*pbig").val()+"p*Verdana";//文字樣式 conte*t.fillStyle=conte*t.strokeStyle//文字顏色 conte*t.fillTe*t($("*pte*t").val(),origin.*,origin.y);//創(chuàng)立文字，控制文件的起始位置 } }4、顏色選擇器代碼varimg=newImage(); img.src="img/color.bmp"; $(img).bind("load",function(){ canvas_color=document.getElementById("canvas_color"); conte*t3=canvas_color.getConte*t('2d'); conte*t3.drawImage(this,0,0,this.width,this.height);//繪制color.bmp canvas_color_data=conte*t3.getImageData(0,0,canvas_color.width,canvas_color.height);//getImageData()復(fù)制畫布上指定矩形的像素?cái)?shù)據(jù) $(canvas_color).bind("mousedown",function(event){ varid*=((event.client*-canvas_color.offsetLeft-1)+(event.clientY-canvas_color.offsetTop-1)*canvas_color_data.width)*4;//id*根據(jù)鼠標(biāo)位置算出的數(shù)值varr=canvas_color_data.data[id*+0];//rgb顏色的算法varg=canvas_color_data.data[id*+1];varb=canvas_color_data.data[id*+2];$("*color_span").css("background-color","rgb("+r+","+g+","+b+")");change_attr(-1,-1,"rgb("+r+","+g+","+b+")");color_changeable=true; }); $(canvas_color).bind("mousemove",function(event){