html5零距離接觸學(xué)習(xí)快速入門_第1頁
html5零距離接觸學(xué)習(xí)快速入門_第2頁
html5零距離接觸學(xué)習(xí)快速入門_第3頁
html5零距離接觸學(xué)習(xí)快速入門_第4頁
html5零距離接觸學(xué)習(xí)快速入門_第5頁
已閱讀5頁，還剩31頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML5習(xí)手冊HTML5快速入門：學(xué)習(xí)指南它的新使命是將Web帶入一個成 應(yīng)用平臺，在HTML5平臺上， 交互都被標(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定位音 檢測削 防止削 加一點 HTML5未來發(fā)展的六大趨 4)設(shè)備 總 HTML的上一個版本誕生于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定義頁面中所有的基準(zhǔn)URL45HTML5CSS代替445HTML5中不支持。定義大號文本445定義body454545545HTML5中不支持。定義居中的文本445454545554545545HTML5中不支持。定 4454545455定義fieldset45定義figure元素的標(biāo)題55HTML5中不支持4定義sectionpage的頁腳545HTML5中不支持。定義子窗口（框架）4HTML5中不支持。定義框架的集4<h1>to定義標(biāo)1到標(biāo)64545定義sectionpage的頁眉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中不支持。定義打字機文本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)使用這些事件進行編程的內(nèi)容，請學(xué)習(xí)我們的JavaScript和DHTML教下面的表格列出了可HTML5元素中以定義事件行為的標(biāo)準(zhǔn)事件屬性Window事件屬性WindowEventFormKeybordMouseMediaWindow件屬window對象觸發(fā)的事件。適用于<body>：屬值描當(dāng)WebStorage區(qū)域更新時（空間中的數(shù)據(jù)發(fā)生變化時由HTML表單的動作觸發(fā)的事件適用于所HTML5元素，不過最常用于表單元素中屬值描當(dāng)表單重置時運行。HTML5不支持適用于所HTML5元素屬值描適用于所有HTML5元素：屬值描適用于所有HTML5元素，不過在媒介元素（諸如audio、embed、img、object以及）中最屬值描當(dāng)媒介元素的定[1]不再為真且定位已結(jié)束時運HTML5CanvasCanvas標(biāo)記很多年前就被當(dāng)作一HTML標(biāo)記成員加入到HTML5標(biāo)準(zhǔn)中。在此之前，人們要想實現(xiàn)動態(tài)的網(wǎng)頁應(yīng)用，只能借助于第的插件，比如Flash或Java，而引入了Canvas標(biāo)記后，canvas標(biāo)記的應(yīng)用功能——圖像顯示和處理。最常見的在canvas上畫圖的方法是使用JavascriptImage對象。所支持的來源格式依賴于瀏覽器的支持，然而，一些典型的格式(png，jpg，gif等)基本上都沒有問題。可以DOM中已經(jīng)加載的元素中抓取，也可以按需即時//抓取頁面上已有的varmyImage myImage=newImage();myImage.src=‘image.png’;大多數(shù)支持canvas標(biāo)記的瀏覽器的當(dāng)前版本中，當(dāng)還沒有加載完成時，如果你要去畫它，結(jié)果是什么事情都不會發(fā)生。也就是說，如果你想畫一個，你需要等它完全加載。你可以使用對象的onload函數(shù)來進行判斷。//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方法的功用是對圖像進行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)記里進行繪圖和處理圖像的基本操作canvas能提供的功能之一，將來我們會發(fā)布的關(guān)于這方面的，會介紹關(guān)于這個標(biāo)記的的特征和功能。HTML5AudioAPI游戲介這同樣適用于音效，例如魔獸里單位實時點擊的響應(yīng)，以及任的經(jīng)典例子。網(wǎng)頁上的我們可以使用所提供的優(yōu)秀測試工具。無法原始的PCM（宇捷：即WAV）數(shù)API 音（它們具有同樣長度）。這樣音軌之間就有某種一致性，避免出現(xiàn)從一個音軌切換到另一個時出現(xiàn)然后，利WebAudioAPI，你可以使用某些類例BufferLoaderXHR導(dǎo)入所有這些音的音效在每一關(guān)開始時，應(yīng)該在頁面加載時同時載入，或者在器時增量加載。[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;}入淡出。下面的示例使用了這一策略，演示的背景音樂在魔獸爭霸2的上逐漸增強：缺少的環(huán)節(jié)：WebAudio的Audio<audio>支持流相當(dāng)有用，因為它可以讓你立即背景音樂，而無須等待所有內(nèi)容。在2.varmediaSourceNode=1.2.varmediaSourceNode=3.//Createthe4.4.varfilter=5.//Createtheaudio音游戲經(jīng)常在響應(yīng)用戶輸入或者游戲狀態(tài)改變時聲音效果。但是像背景音樂一樣，音效可以很快的一個音效池放置相似但是不同的音效。微變化游戲音效的另外一個關(guān)鍵點是可以同時有多個。想象一下，你與多個演員拍攝槍。每個機槍每秒觸發(fā)多次，造成幾十個音效同時。從多個源同時音效，還要對音效源精確計時，是網(wǎng)絡(luò)音頻API真正的亮點。 [html][html]view vartime=varsource= source.noteOn(time+i* for(vari=0;i<rounds;i++)3D定位音浸感的體驗。幸運的是，網(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置段進行了y軸的變換。高級：音定位模型非常強大，而且相當(dāng)先進，主要基于OpenAL。詳細信息請查看上述規(guī)范的第3和第[html]view [html]view panner.coneOuterGain= var panner.coneOuterGain= panner.coneOuterAngle= panner.coneInnerAngle=雖然例子在2D空間，但是這種模式很容易推廣到三維。例如3D聲音空間化的例子關(guān)于這一的信息，可以閱讀混合定位音頻和WebGL的詳細室內(nèi)效果在現(xiàn)實中，聲音被感覺的方式很大程度上取決于聲音所在的房間。相同吱吱作響的門在室與大型的開放式大廳里相比會發(fā)出相當(dāng)不同。高產(chǎn)值的游戲?qū)７逻@些影響，因為為每個環(huán)境創(chuàng)建應(yīng)，即通過使用ConvolverNode的方式。2.varsource=1.//Makeasource2.varsource=4.//Makeaconvolver4.//Makeaconvolvernodefortheimpulse5.varconvolver=6.6.convolver.buffer=7.//Connectthe 最后的倒。太棒[html]view波反生時，視覺反饋會非常有用。要可靠的實現(xiàn)這點，可以把JavaScriptAudioNode放到你的圖里。音[html]view varmeter=context.createJavaScriptNode(2048,1, //Assumeentiresoundoutputis varmeter=context.createJavaScriptNode(2048,1, meter.onaudioprocess= 同時通過下面的processAudio方法可以檢測到削波[html][html]view functionprocessAudio(e)//Iteratethroughbuffertocheckifanyofthe|values|exceedsvarabsValue==} }if(absValue>=1)for(vari=0;i<buffer.length;i++)=varvarbuffer=在通常情況下要，因為性能方面的原因，不要過度的使用JavaScriptAudioNode。在這種情況下，一種替代的方法是getByteFrequencyData在音RealtimeyserNode，在渲方），因為渲染最多發(fā)生60次，而音頻信號的變化更為迅速。因為削波的檢測非常重要，未來我們很可能將看到網(wǎng)絡(luò)音頻API節(jié)點內(nèi)置MeterNode通過調(diào)整AudioGainNode的增益，你可以控制混音的水平實踐中，因為你游戲中所可能取決于大量因素，所以決定主增益值來防止所有情況下的削波是相當(dāng)?shù)?。在通常情況下，你應(yīng)該調(diào)整增益來預(yù)期的情況，但這是一門藝術(shù)，而不是科學(xué)。曲是由YasunoriMitsuda所做的偉大的“超時空之輪”。pressorNode來實現(xiàn)，可以在你的音頻圖加入一個更響亮，更豐富，更飽滿的音色，這知道到底此時什么聲音將會何時。DinahMoe的Plink是很好的例子，因為聲音的回放完全取[html]view pressorNode[html]view varcompressor= //Assumetheoutput varcompressor= 以上內(nèi)容涵蓋了我認為使用網(wǎng)絡(luò)音API來開發(fā)游戲音樂最重要的方面。有了這些技術(shù)，可以在你的瀏visibilityAPI切換到了，一定要讓聲音暫停，否則你會為用戶提供一個潛在的令人厭煩的體驗。HTML5來發(fā)在移動領(lǐng)域，大家爭論不休的一個問題就Web應(yīng)用還是原生應(yīng)用HTML5標(biāo)準(zhǔn)的發(fā)展，兩者之間的差異已經(jīng)逐漸變得模糊，今天各大都爭相與HTML5有關(guān)的東西，那么，HTML5未注于在移動平臺上如何實現(xiàn)HTML5的簡單易用和無處不在。Web應(yīng)用，同樣表現(xiàn)出色。游戲開發(fā)者領(lǐng)銜“主其實移動游戲開發(fā)商是從HTML5獲益最多的一方，他們可利用這個平臺逃脫游戲須向蘋果支付的 或者Zynga推動著發(fā)展，而未來的 及appmobi的XDK將Web應(yīng)用游戲打包整合到原生應(yīng)用中也是式， 的——基于Web應(yīng)用及瀏覽器，但卻將之打包整合進原生應(yīng)用。響應(yīng)式設(shè)計&自動變化的屏幕尺 念設(shè)計必須從頭開始，比如處理的RespondJS，而且處理來自第的和也是惱人的問實在過去的16年中，開發(fā)商就響應(yīng)式設(shè)計就要完全離開“流”，轉(zhuǎn)而注重內(nèi)容是如何在網(wǎng)頁和移動設(shè)備中被處理的，這一過程還在繼續(xù)，HTML5會讓它最終成為可能。4消除Web應(yīng)用與原生應(yīng)用界限的最大就是瀏

溫馨提示

  • 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)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論