單元7 網(wǎng)頁圖形繪制與游戲設(shè)計_第1頁
單元7 網(wǎng)頁圖形繪制與游戲設(shè)計_第2頁
單元7 網(wǎng)頁圖形繪制與游戲設(shè)計_第3頁
單元7 網(wǎng)頁圖形繪制與游戲設(shè)計_第4頁
單元7 網(wǎng)頁圖形繪制與游戲設(shè)計_第5頁
已閱讀5頁，還剩90頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

單元7

網(wǎng)頁圖形繪制與游戲設(shè)計 HTML5增加了對圖像及動畫的支持，在HTML5中實現(xiàn)繪圖操作，主要依賴于<canvas>元素及<canvas>元素相關(guān)的API，基于Canvas、SVG、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中所呈現(xiàn)的驚人視覺效果。 同時HTML5的<canvas>元素提供了一個非常強大的、移動友好的方式去開發(fā)有趣互動的游戲。 本單元通過網(wǎng)頁圖形繪制與游戲設(shè)計的探析與訓(xùn)練，重點學(xué)習(xí)HTML5中的<canvas>標(biāo)簽、畫布與畫筆、坐標(biāo)與路徑、各種網(wǎng)頁圖形的繪制、圖片的繪制、陰影效果和顏色漸變效果的設(shè)置等，學(xué)會應(yīng)用<canvas>標(biāo)簽及相關(guān)屬性和方法進行網(wǎng)頁圖形繪制與游戲設(shè)計。教學(xué)導(dǎo)航教學(xué)目標(biāo)（1）了解陰影效果和顏色漸變效果的設(shè)置方法（2）掌握HTML5中的<canvas>標(biāo)簽（3）熟悉HTML5中的畫布與畫筆、坐標(biāo)與路徑（4）熟悉各種網(wǎng)頁圖形的繪制和圖片的繪制（5）學(xué)會應(yīng)用<canvas>標(biāo)簽及相關(guān)屬性和方法進行網(wǎng)頁圖形繪制與游戲設(shè)計關(guān)鍵字網(wǎng)頁圖形繪制游戲設(shè)計<canvas>標(biāo)簽畫布與畫筆圖片的繪制參考資料（1）HTML5的常用標(biāo)簽及其屬性、方法與事件參考附錄B（2）CSS的屬性參考附錄C（3）CSS的各種選擇器的含義和用法參考附錄D教學(xué)方法任務(wù)驅(qū)動法、分組討論法、理論實踐一體化、探究學(xué)習(xí)法課時建議8課時實例探析【任務(wù)7-1】探析網(wǎng)頁中菊花圖形的繪制【效果展示】 網(wǎng)頁0701.html中繪制菊花圖形的瀏覽效果如圖7-1所示。圖7-1網(wǎng)頁0701.html中

繪制菊花圖形的瀏覽效果【網(wǎng)頁探析】 1．網(wǎng)頁0701.html中菊花圖形繪制的HTML代碼探析 2．網(wǎng)頁0701.html中菊花圖形繪制的JavaScript代碼探析【任務(wù)7-2】探析網(wǎng)頁中精美掛鐘的繪制【效果展示】 網(wǎng)頁0702.html中精美掛鐘的瀏覽效果如圖7-2所示。圖7-2網(wǎng)頁0702.htm

中精美掛鐘的瀏覽效果【網(wǎng)頁探析】 1．網(wǎng)頁0702.html中精美掛鐘繪制的HTML代碼探析 2．網(wǎng)頁0702.html中精美掛鐘繪制的JavaScript代碼探析知識梳理1．HTML5的<canvas>標(biāo)簽 <canvas>標(biāo)簽用于在網(wǎng)頁上繪制圖形。 <canvas>標(biāo)簽只是定義圖形容器（畫布），必須使用JavaScript在網(wǎng)頁上繪制圖像。 畫布是一個矩形區(qū)域，可以控制其每一像素。 <canvas>擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。2．HTML5的畫布與畫筆（1）畫布 Canvas意為畫布，而HTML5中的Canvas也真的跟現(xiàn)實生活中的畫布非常相似，所以，把它看成一塊實實在在的畫布可以方便理解。 用Canvas作畫，首先，需要有一塊“畫布”，即創(chuàng)建一個<canvas>即可。 創(chuàng)建<canvas>元素的方法很簡單，只需要在HTML5頁面中添加<canvas>元素。注意：這個畫布的特性有必要說一下，它和<img>一樣，有兩個原生的屬性，即width和height，單位為像素。同時，因為它也是一個<html>元素，所以它也可以使用CSS來定義width和height，但是，千萬要注意：它自身的寬、高和通過CSS定義的寬、高是不一樣的。（2）畫筆 創(chuàng)建好了畫布后，讓我們來準(zhǔn)備畫筆，創(chuàng)建context對象。 getContext("2d")對象是HTML5的內(nèi)建對象，擁有多種繪制路徑、矩形、圓形、字符及添加圖像的方法，在JavaScript中通過操作它即可以在Canvas畫布中繪制所需的圖形。 其中g(shù)etContext方法就是用來拿筆的，但這里還有一個參數(shù)——2d，這個可以看作畫筆的種類。 既然有2d，那么就會有3d了？ 以后估計會有，但現(xiàn)在沒有。所以我們先用這支2d的筆吧。 那么我們可以多放幾只筆來備用嗎？答案是不能。 因為HTML5的<canvas>標(biāo)簽也只支持同時用一支筆。3．HTML5的坐標(biāo)與路徑（1）坐標(biāo) 2d世界就是平面，在一個平面上確定一個點，需要兩個值：x坐標(biāo)和y坐標(biāo)。 <canvas>的原點是左上角，跟<flash>一樣。圖7-3

HTML5圖形繪制的坐標(biāo)與原點 上面的fillRect方法擁有參數(shù)(0,0,80,100)，意思是在畫布上繪制80×100的矩形，從左上角開始(0,0)。 如圖7-3所示，畫布的x和y坐標(biāo)用于在畫布上對繪畫進行定位。（2）路徑 在Canvas中，所有基本圖形都是以路徑為基礎(chǔ)的，通常使用Context對象的moveTo()、lineTo()、rect()、arc()等方法先在畫布中描出圖形的路徑點，然后使用fill()或者stroke()方法依照路徑點來填充圖形或者繪制線條。 也就是說，我們在調(diào)用Context的lineTo、strokeRect等方法時，其實就是往已經(jīng)構(gòu)建的Context路徑集合中再添加一些路徑點，在最后使用fill或stroke方法進行繪制時，都是依據(jù)這些路徑點來進行填充或畫線。 ①開始與關(guān)閉：beginPath、closePath

beginPath()：開始繪制一個新路徑。

closePath()：通過繪制一條當(dāng)前點 到路徑起點的線段來閉合形狀。 ②移動與直線：moveTo、lineTo、rect voidmoveTo(infloatx,infloaty);

moveTo方法用于顯式地指定路徑的起點。 默認狀態(tài)下，第一條路徑的起點是畫布的(0,0)點，之后的起點是上一條路徑的終點。兩個參數(shù)分為表示起點的x、y坐標(biāo)值。 在Canvas中繪制路徑，一般是不需要指定起點的，就需要使用moveTo方法來指定要移動到的位置。 ③曲線：arcTo、arc、quadraticCurveTo、bezierCurveTo voidarcTo(infloatx1,infloaty1,infloatx2,infloaty2,infloatradius);

arcTo方法用于繪制一個與兩條線段相切的圓弧，兩條線段分別以當(dāng)前Context繪制起點和（x2,y2）點為起點，都以（x1,y1）點為終點，圓弧的半徑為radius。繪制完成后繪制起點會移動到以（x2,y2）為起點的線段與圓弧的切點。 voidarc(infloatx,infloaty,infloatradius,infloatstartAngle,infloatendAngle,inbooleananticlockwise); arc方法用于繪制一個以(x,y)點為圓心，radius為半徑，startAngle為起始弧度，endAngle為終止弧度的圓弧。 參數(shù)中的兩個弧度以0表示0°，位置在3點鐘方向；Math.PI值表示180°，位置在9點鐘方向。 arc方法各個參數(shù)及其含義如表7-5所示。 arc方法用來繪制一段圓弧路徑，通過圓心位置、起始弧度、終止弧度來指定圓弧的 位置和大小，這個方法也不依賴于Context維護的繪制起點。參數(shù)名稱參數(shù)描述x圓中心的x坐標(biāo)值y圓中心的y坐標(biāo)值radius圓的半徑startAngle超始角，以弧度計endAngle結(jié)束角，以弧度計anticlockwise可選項，false表示順時針方向，true表示逆時針方向表7-5

arc方法各個參數(shù)及其含義 arc()方法的開始角、結(jié)束角以及角度大小表示如圖7-4所示。圖7-4

arc()方法的開始角、結(jié)束角

以及角度大小表示示意圖

quadraticCurveTo方法用來繪制二次樣條曲線路徑，參數(shù)中cpx與cpy指定控制點的位置，x和y指定終點的位置，起點則是由Context維護的繪制起點。 ④fill、stroke、clip 路徑繪制完成后，需要調(diào)用Context對象的fill()和stroke()方法來填充路徑和繪制路徑線條，或者調(diào)用clip()方法來剪輯Canvas區(qū)域。 fill方法用于使用當(dāng)前的填充風(fēng)格來填充路徑的區(qū)域，stroke方法用于按照已有的路徑繪制線條。 clip方法用于按照已有的路線在畫布Canvas中設(shè)置剪輯區(qū)域。 調(diào)用clip()方法之后，圖形繪制代碼只對剪輯區(qū)域有效而不再影響區(qū)域外的畫布。 這個方法在要進行局部更新時很有用。 默認情況下，剪輯區(qū)域是一個左上角在(0,0)，寬和高分別等于Canvas元素的寬和高的矩形，即得到的剪輯區(qū)域為整個Canvas區(qū)域。 ⑤clearRect、fillRect、strokeRect 這3個方法并不是路徑方法，而是用來直接處理Canvas上的內(nèi)容，相當(dāng)于Canvas的背景，調(diào)用這3個方法也不會影響Context繪圖的起點。 要清除Canvas上的所有內(nèi)容時，可以直接調(diào)用context.clearRect(0,0,width,height)來清除，而不需要使用路徑方法繪制一個與Canvas同等大小的矩形路徑再使用fill方法去清除。4．圖形繪制的風(fēng)格設(shè)置屬性 Context對象還提供了相應(yīng)的屬性來調(diào)整線條及填充風(fēng)格，如表7-6所示。屬性名稱使用說明strokeStyle用于設(shè)置線條的顏色，默認為“#000000”，其值可以設(shè)置為CSS顏色值、漸變對象或者模式對象fillStyle用于設(shè)置填充的顏色，默認為“#000000”，與strokeStyle一樣，值也可以設(shè)置為CSS顏色值、漸變對象或者模式對象lineWidt用于設(shè)置線條的寬度，單位是像素（px），默認為1.0lineCap用于設(shè)置線條的端點樣式，有butt（無）、round（圓頭）、square（方頭）3種類型可供選擇，默認為buttlineJoin用于設(shè)置線條的轉(zhuǎn)折處樣式，有round（圓角）、bevel（平角）、miter（尖角）3種；類型可供選擇，默認為mitermiterLimit用于設(shè)置線條尖角折角的銳利程序，默認為10表7-6圖形繪制的風(fēng)格設(shè)置屬性及含義5．繪制矩形 Context對象擁有3個方法可以直接在畫布上繪制圖形而不需要路徑，可以將其視為直接在畫布背景中繪制，這3個方法的原型如下。（1）voidfillRect(left,top,width,height)。 用于使用當(dāng)前的fillStyle（默認為“#000000”， 黑色）樣式填充一個左上角頂點在（left,top）點、寬為width、高為height的矩形。（2）voidstrokeRect(left,top,width,height)。 用于使用當(dāng)前的線條風(fēng)格繪制一個左上角頂點在(left,top)點、寬為width、高為height的矩形邊框。（3）voidclearRect(left,top,width,height)。 用于清除左上角頂點在(left,top)點、寬為width、高為height的矩形區(qū)域內(nèi)的所有內(nèi)容。 通過fillStyle和strokeStyle屬性可以輕松的設(shè)置矩形的填充和線條，通過fillRect可以繪制帶填充的矩形，使用strokeRect可以繪制只有邊框沒有填充的矩形。 如果想清除部分Canvas可以使用clearRect。 上述3個方法的參數(shù)相同：x,y,width,height。 前兩個參數(shù)設(shè)定(x,y)坐標(biāo)，后兩個參數(shù)設(shè)置矩形的高度和寬度。 可以使用lineWidth屬性改變線條粗細。6．繪制任意形狀在簡單的矩形不能滿足需求的情況下，繪圖環(huán)境提供了通過Canvas路徑（path）繪制復(fù)雜的形狀或路徑的方法。 可以先繪制輪廓，然后繪制邊框和填充。 使用beginPath()方法開始繪制路徑，然后使 用moveTo()、lineTo()、arc()方法創(chuàng)建線段。 繪制完畢使用stroke()或fill()即可添加填充或 者設(shè)置邊框。 使用fill()會自動閉合所有未閉合路徑。 使用closePath()結(jié)束繪制并閉合形狀（可選）。7．繪制文字 在繪圖環(huán)境中提供了兩種方法在Canvas中繪制文字。（1）strokeText(text,x,y,[maxWidth]) 在(x,y)處繪制只有strokeStyle邊框的空心文本。（2）fillText(text,x,y,[maxWidth]) 在(x,y)處繪制帶fillStyle填充的實心文本。 兩者的參數(shù)相同：要繪制的文字和文字的位置(x,y)坐標(biāo)。 還有一個可選選項——最大寬度。 如果需要的話，瀏覽器會縮減文字以讓它適應(yīng)指定寬度。 文字對齊屬性影響文字與設(shè)置的(x,y)坐標(biāo)的相對位置。 可以通過改變Context對象的font屬性來調(diào)整文字的字體及大小，默認為“10pxsans-serif”。 Context對象可以設(shè)置以下text屬性： ①font：文字字體。 ②textAlign：文字水平對齊方式，可取屬性值為start、end、left、right和center。默認值為start。 ③textBaseline：文字豎直對齊方式?？扇傩灾禐閠op、hanging、middle、alphabetic、ideographic、bottom。默認值為alphabetic。8．設(shè)置陰影效果 ShadowsAPI的屬性為: ①shadowColor：用于設(shè)置陰影顏色，其值和CSS顏色值一致。 ②shadowBlur：用于設(shè)置陰影模糊程度，此值越大，陰影越模糊。其效果和Photoshop的高斯模糊濾鏡相同。 ③shadowOffsetX和shadowOffsetY：用于設(shè)置陰影的x和y偏移量，單位是像素。9．設(shè)置顏色漸變 除了CSS顏色，fillStyle和strokeStyle屬性可以設(shè)置為CanvasGradient對象，通過CanvasGradient可以為線條和填充使用顏色漸變。 若創(chuàng)建CanvasGradient對象，可以使用createLinearGradient和createRadialGradient兩個方法。 前者創(chuàng)建線性顏色漸變，后者創(chuàng)建圓形顏色漸變。創(chuàng)建顏色漸變對象后，可以使用對象的addColorStop方法添加顏色中間值。10．繪制圖片 Context對象中擁有drawImage()方法可以將外部圖片繪制到Canvas中。 drawImage()方法的3種原型如下： ①drawImage(image,dx,dy); ②drawImage(image,dx,dy,dw,dh); ③drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);11．SVG HTML5支持內(nèi)聯(lián)SVG，SVG指可伸縮矢量圖形（ScalableVectorGraphics），SVG是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)，SVG用于定義用于網(wǎng)絡(luò)的基于矢量的圖形，SVG使用XML格式定義圖形，SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失。（1）使用SVG圖像的優(yōu)勢 與其他圖像格式相比（如JPEG和GIF），使用SVG的優(yōu)勢在于： ①SVG圖像可通過文本編輯器來創(chuàng)建和修改。 ②SVG圖像可被搜索、索引、腳本化或壓縮。 ③SVG圖像是可伸縮的。 ④SVG圖像可在任何的分辨率下被高質(zhì)量地打印。 ⑤SVG可在圖像質(zhì)量不下降的情況下被放大。（2）<canvas>標(biāo)簽和SVG以及VML之間的差異 Canvas和SVG都允許在瀏覽器中創(chuàng)建圖形，但是它們在根本上是不同的。 SVG是一種使用XML描述2D圖形的語言，SVG基于XML，這意味著SVGDOM中的每個元素都是可用的，可以為某個元素附加JavaScript事件處理器。 在SVG中，每個被繪制的圖形均被視為對象。 如果SVG對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。 Canvas通過JavaScript來繪制2D圖形，Canvas是逐像素進行渲染的。 在Canvas中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關(guān)注。 如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。 VML（VectorMarkupLanguage）是一個最初由Microsoft開發(fā)的XML詞表，現(xiàn)在也只有IE5.0以上版本對VML提供支持。 使用VML可以在IE中繪制矢量圖形，所以有人認為VML就是在IE中實現(xiàn)了畫筆的功能。引導(dǎo)訓(xùn)練【任務(wù)7-3】在網(wǎng)頁中繪制各種圖形和文字【任務(wù)描述】（1）在網(wǎng)頁中繪制圖7-5至圖7-7所示的各種圖形。圖7-5網(wǎng)頁中繪制空心正方形的瀏覽效果圖7-6網(wǎng)頁中繪制多個長方形的瀏覽效果圖7-7網(wǎng)頁中繪制多個不同形狀圖形的瀏覽效果（2）在網(wǎng)頁中繪制圖7-8所示的各種文字。（3）在網(wǎng)頁中繪制圖7-9所示的各種圖片。圖7-8網(wǎng)頁中繪制各種文字的瀏覽效果圖7-9網(wǎng)頁中繪制各種圖片的瀏覽效果【任務(wù)實施】（1）繪制一個空心正方形 在本地硬盤的文件夾“07網(wǎng)頁圖形繪制與游戲設(shè)計\0703”中創(chuàng)建網(wǎng)頁070301.html。（2）繪制多個長方形（3）繪制多個不同形狀的圖形（4）繪制多個不同大小和字體的文字（5）繪制圖片【任務(wù)7-

溫馨提示

  • 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

提交評論