html5零距離接觸學(xué)習(xí)快速入門_第1頁(yè)
html5零距離接觸學(xué)習(xí)快速入門_第2頁(yè)
html5零距離接觸學(xué)習(xí)快速入門_第3頁(yè)
html5零距離接觸學(xué)習(xí)快速入門_第4頁(yè)
html5零距離接觸學(xué)習(xí)快速入門_第5頁(yè)
免費(fèi)預(yù)覽已結(jié)束，剩余31頁(yè)可下載查看

下載本文檔

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

文檔簡(jiǎn)介

HTML5習(xí)手冊(cè)HTML5快速入門：學(xué)習(xí)指南它的新使命是將Web帶入一個(gè)成 應(yīng)用平臺(tái)，在HTML5平臺(tái)上， 交互都被標(biāo)準(zhǔn)化，該文檔旨在幫助讀者快速學(xué)習(xí)HTML5。2012-5-HTML5學(xué)習(xí)手 HTML5標(biāo)準(zhǔn)屬 HTML屬 Window事件屬 表單事 鍵盤事 鼠標(biāo)事 媒介事 HTML5Canvas圖像處理技 圖像來 基本繪 圖像裁 用HTML5AudioAPI開發(fā)游戲音 介 背景音 缺少的環(huán)節(jié)：WebAudio的Audio音 3D定位音 檢測(cè)削 防止削 加一點(diǎn) HTML5未來發(fā)展的六大趨 4)設(shè)備 總 HTML的上一個(gè)版本誕生于1999年。自從那以后，Web世界已經(jīng)經(jīng)歷了巨變。HTML5是W3C與WHATWG合作的結(jié)果。HTML5仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備HTML5支HTML5canvas元用于媒介回放的和audio元新的特殊內(nèi)容元素，比如4:HTML4.01中定義了該元5:HTML5中定義了該元描45<!--...--45454545HTML5中不支持。定義首字母縮寫445HTML5中不支持。定applet445定義article55545定義頁(yè)面中所有的基準(zhǔn)URL45HTML5CSS代替445HTML5中不支持。定義大號(hào)文本445定義body454545545HTML5中不支持。定義居中的文本445454545554545545HTML5中不支持。定 4454545455定義fieldset45定義figure元素的標(biāo)題55HTML5中不支持4定義sectionpage的頁(yè)腳545HTML5中不支持。定義子窗口（框架）4HTML5中不支持。定義框架的集4<h1>to定義標(biāo)1到標(biāo)64545定義sectionpage的頁(yè)眉5定義有關(guān)文檔中section的信息545定義html文檔4545454545455HTML5中不支持。定義單行的輸44545定義fieldset中的標(biāo)題454545455454555HTML5中不支持。定義noframe部分4定義noscript45454545455454545545定義若瀏覽器不支持ruby元素顯示的內(nèi)容5定義ruby注釋的解釋5定義ruby注釋5HTML5中不支持。定義加刪除線的文本44545定義section545455定義文檔中的section45HTML5中不支持。定義加刪除線的文本4454545定義details元素的標(biāo)題545454545定義textarea4545454554545HTML5中不支持。定義打字機(jī)文本4HTML5中不支持。定義下劃線文本44545<5HTML5中不支持。定義預(yù)格式文本4HTML5NEW：HTML5中新的標(biāo)準(zhǔn)注釋：HTML4.01不再支accesskey屬值描HTML文檔的創(chuàng)作者可以定義他們自己的屬性。必須以"data-"開頭。IDtab鍵控制次序HTML屬標(biāo)準(zhǔn)事件段如果需要學(xué)習(xí)有關(guān)使用這些事件進(jìn)行編程的內(nèi)容，請(qǐng)學(xué)習(xí)我們的JavaScript和DHTML教下面的表格列出了可HTML5元素中以定義事件行為的標(biāo)準(zhǔn)事件屬性Window事件屬性WindowEventFormKeybordMouseMediaWindow件屬window對(duì)象觸發(fā)的事件。適用于<body>：屬值描當(dāng)WebStorage區(qū)域更新時(shí)（空間中的數(shù)據(jù)發(fā)生變化時(shí)由HTML表單的動(dòng)作觸發(fā)的事件適用于所HTML5元素，不過最常用于表單元素中屬值描當(dāng)表單重置時(shí)運(yùn)行。HTML5不支持適用于所HTML5元素屬值描適用于所有HTML5元素：屬值描適用于所有HTML5元素，不過在媒介元素（諸如audio、embed、img、object以及）中最屬值描當(dāng)媒介元素的定[1]不再為真且定位已結(jié)束時(shí)運(yùn)HTML5CanvasCanvas標(biāo)記很多年前就被當(dāng)作一HTML標(biāo)記成員加入到HTML5標(biāo)準(zhǔn)中。在此之前，人們要想實(shí)現(xiàn)動(dòng)態(tài)的網(wǎng)頁(yè)應(yīng)用，只能借助于第的插件，比如Flash或Java，而引入了Canvas標(biāo)記后，canvas標(biāo)記的應(yīng)用功能——圖像顯示和處理。最常見的在canvas上畫圖的方法是使用JavascriptImage對(duì)象。所支持的來源格式依賴于瀏覽器的支持，然而，一些典型的格式(png，jpg，gif等)基本上都沒有問題。可以DOM中已經(jīng)加載的元素中抓取，也可以按需即時(shí)//抓取頁(yè)面上已有的varmyImage myImage=newImage();myImage.src=‘image.png’;大多數(shù)支持canvas標(biāo)記的瀏覽器的當(dāng)前版本中，當(dāng)還沒有加載完成時(shí)，如果你要去畫它，結(jié)果是什么事情都不會(huì)發(fā)生。也就是說，如果你想畫一個(gè)，你需要等它完全加載。你可以使用對(duì)象的onload函數(shù)來進(jìn)行判斷。//Createanimage.myImage=newImage();myImage.onload=function()//Draw}myImage.src=drawImage(image,x,varcanvas .geementByIdvarctx=canvas.getContext(’2d’);ctx.drawImage(myImage,50,50);ctx.drawImage(myImage,125,125);ctx.drawImage(myImage,210,縮放及調(diào)整尺寸drawImage(image,x,y,width,varcanvas .geementByIdvarctx=canvas.getContext(’2d’);ctx.drawImage(myImage,50,50,100,ctx.drawImage(myImage,125,125,200,ctx.drawImage(myImage,210,210,500,最后一drawImage方法的功用是對(duì)圖像進(jìn)行drawImage(image,varcanvas .geementByIdctx.drawImage(myImage,125,125,100,100,125,125,150,ctx.drawImage(myImage,80,80,100,100,250,250,220,HTML5canvas(畫布)標(biāo)記里進(jìn)行繪圖和處理圖像的基本操作canvas能提供的功能之一，將來我們會(huì)發(fā)布的關(guān)于這方面的，會(huì)介紹關(guān)于這個(gè)標(biāo)記的的特征和功能。HTML5AudioAPI游戲介這同樣適用于音效，例如魔獸里單位實(shí)時(shí)點(diǎn)擊的響應(yīng)，以及任的經(jīng)典例子。網(wǎng)頁(yè)上的我們可以使用所提供的優(yōu)秀測(cè)試工具。無法原始的PCM（宇捷：即WAV）數(shù)API 音（它們具有同樣長(zhǎng)度）。這樣音軌之間就有某種一致性，避免出現(xiàn)從一個(gè)音軌切換到另一個(gè)時(shí)出現(xiàn)然后，利WebAudioAPI，你可以使用某些類例BufferLoaderXHR導(dǎo)入所有這些音的音效在每一關(guān)開始時(shí)，應(yīng)該在頁(yè)面加載時(shí)同時(shí)載入，或者在器時(shí)增量加載。[html]view//AssumegainsisanarrayofAudioGainNode,normValisthe//between0andvarvalue=normVal*(gains.length-//Firstresetgainsonallfor(vari=0;i<gains.length;{gains[i].gain.value=}//Decidewhichtwonodeswearecurrentlybetween,anddoan//powercrossfadebetweenthem.varleftNode=Math.floor(value);//Normalizethevaluebetween0and1.varx=value-leftNode;vargain1=Math.cos(x*vargain2=Math.cos((1.0-x)*//Setthetwogainsaccordingly.gains[leftNode].gain.value=gain1;//Checktomakesurethatthere'sarightnode.if(leftNode<gains.length-1){//Ifthereis,adjustitsgain.gains[leftNode+1].gain.value=gain2;}入淡出。下面的示例使用了這一策略，演示的背景音樂在魔獸爭(zhēng)霸2的上逐漸增強(qiáng)：缺少的環(huán)節(jié)：WebAudio的Audio<audio>支持流相當(dāng)有用，因?yàn)樗梢宰屇懔⒓幢尘耙魳?，而無須等待所有內(nèi)容。在2.varmediaSourceNode=1.2.varmediaSourceNode=3.//Createthe4.4.varfilter=5.//Createtheaudio音游戲經(jīng)常在響應(yīng)用戶輸入或者游戲狀態(tài)改變時(shí)聲音效果。但是像背景音樂一樣，音效可以很快的一個(gè)音效池放置相似但是不同的音效。微變化游戲音效的另外一個(gè)關(guān)鍵點(diǎn)是可以同時(shí)有多個(gè)。想象一下，你與多個(gè)演員拍攝槍。每個(gè)機(jī)槍每秒觸發(fā)多次，造成幾十個(gè)音效同時(shí)。從多個(gè)源同時(shí)音效，還要對(duì)音效源精確計(jì)時(shí)，是網(wǎng)絡(luò)音頻API真正的亮點(diǎn)。 [html][html]view vartime=varsource= source.noteOn(time+i* for(vari=0;i<rounds;i++)3D定位音浸感的體驗(yàn)。幸運(yùn)的是，網(wǎng)絡(luò)音API便說[html]view PositionStotype.changePosition=function(position)//with-0.5<x,y<if(!this.isPlaying)}varx=position.x/this.panner.setPosition(x*mul,y*mul,- }[html]view PositionStotype.changePosition=function(position)//with-0.5<x,y<if(!this.isPlaying)}varx=position.x/this.panner.setPosition(x*mul,y*mul,- }}elsevary=-position.y/varmul=if(position)//Positioncoordinatesareinnormalizedcanvas置段進(jìn)行了y軸的變換。高級(jí)：音定位模型非常強(qiáng)大，而且相當(dāng)先進(jìn)，主要基于OpenAL。詳細(xì)信息請(qǐng)查看上述規(guī)范的第3和第[html]view [html]view panner.coneOuterGain= var panner.coneOuterGain= panner.coneOuterAngle= panner.coneInnerAngle=雖然例子在2D空間，但是這種模式很容易推廣到三維。例如3D聲音空間化的例子關(guān)于這一的信息，可以閱讀混合定位音頻和WebGL的詳細(xì)室內(nèi)效果在現(xiàn)實(shí)中，聲音被感覺的方式很大程度上取決于聲音所在的房間。相同吱吱作響的門在室與大型的開放式大廳里相比會(huì)發(fā)出相當(dāng)不同。高產(chǎn)值的游戲?qū)?huì)模仿這些影響，因?yàn)闉槊總€(gè)環(huán)境創(chuàng)建應(yīng)，即通過使用ConvolverNode的方式。2.varsource=1.//Makeasource2.varsource=4.//Makeaconvolver4.//Makeaconvolvernodefortheimpulse5.varconvolver=6.6.convolver.buffer=7.//Connectthe 最后的倒。太棒[html]view波反生時(shí)，視覺反饋會(huì)非常有用。要可靠的實(shí)現(xiàn)這點(diǎn)，可以把JavaScriptAudioNode放到你的圖里。音[html]view varmeter=context.createJavaScriptNode(2048,1, //Assumeentiresoundoutputis varmeter=context.createJavaScriptNode(2048,1, meter.onaudioprocess= 同時(shí)通過下面的processAudio方法可以檢測(cè)到削波[html][html]view functionprocessAudio(e)//Iteratethroughbuffertocheckifanyofthe|values|exceedsvarabsValue==} }if(absValue>=1)for(vari=0;i<buffer.length;i++)=varvarbuffer=在通常情況下要，因?yàn)樾阅芊矫娴脑?，不要過度的使用JavaScriptAudioNode。在這種情況下，一種替代的方法是getByteFrequencyData在音RealtimeyserNode，在渲方），因?yàn)殇秩咀疃喟l(fā)生60次，而音頻信號(hào)的變化更為迅速。因?yàn)橄鞑ǖ臋z測(cè)非常重要，未來我們很可能將看到網(wǎng)絡(luò)音頻API節(jié)點(diǎn)內(nèi)置MeterNode通過調(diào)整AudioGainNode的增益，你可以控制混音的水平實(shí)踐中，因?yàn)槟阌螒蛑兴赡苋Q于大量因素，所以決定主增益值來防止所有情況下的削波是相當(dāng)?shù)?。在通常情況下，你應(yīng)該調(diào)整增益來預(yù)期的情況，但這是一門藝術(shù)，而不是科學(xué)。曲是由YasunoriMitsuda所做的偉大的“超時(shí)空之輪”。pressorNode來實(shí)現(xiàn)，可以在你的音頻圖加入一個(gè)更響亮，更豐富，更飽滿的音色，這知道到底此時(shí)什么聲音將會(huì)何時(shí)。DinahMoe的Plink是很好的例子，因?yàn)槁曇舻幕胤磐耆html]view pressorNode[html]view varcompressor= //Assumetheoutput varcompressor= 以上內(nèi)容涵蓋了我認(rèn)為使用網(wǎng)絡(luò)音API來開發(fā)游戲音樂最重要的方面。有了這些技術(shù)，可以在你的瀏visibilityAPI切換到了，一定要讓聲音暫停，否則你會(huì)為用戶提供一個(gè)潛在的令人厭煩的體驗(yàn)。HTML5來發(fā)在移動(dòng)領(lǐng)域，大家爭(zhēng)論不休的一個(gè)問題就Web應(yīng)用還是原生應(yīng)用HTML5標(biāo)準(zhǔn)的發(fā)展，兩者之間的差異已經(jīng)逐漸變得模糊，今天各大都爭(zhēng)相與HTML5有關(guān)的東西，那么，HTML5未注于在移動(dòng)平臺(tái)上如何實(shí)現(xiàn)HTML5的簡(jiǎn)單易用和無處不在。Web應(yīng)用，同樣表現(xiàn)出色。游戲開發(fā)者領(lǐng)銜“主其實(shí)移動(dòng)游戲開發(fā)商是從HTML5獲益最多的一方，他們可利用這個(gè)平臺(tái)逃脫游戲須向蘋果支付的 或者Zynga推動(dòng)著發(fā)展，而未來的 及appmobi的XDK將Web應(yīng)用游戲打包整合到原生應(yīng)用中也是式， 的——基于Web應(yīng)用及瀏覽器，但卻將之打包整合進(jìn)原生應(yīng)用。響應(yīng)式設(shè)計(jì)&自動(dòng)變化的屏幕尺 念設(shè)計(jì)必須從頭開始，比如處理的RespondJS，而且處理來自第的和也是惱人的問實(shí)在過去的16年中，開發(fā)商就響應(yīng)式設(shè)計(jì)就要完全離開“流”，轉(zhuǎn)而注重內(nèi)容是如何在網(wǎng)頁(yè)和移動(dòng)設(shè)備中被處理的，這一過程還在繼續(xù)，HTML5會(huì)讓它最終成為可能。4消除Web應(yīng)用與原生應(yīng)用界限的最大就是瀏

溫馨提示

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

評(píng)論

0/150

提交評(píng)論