通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實(shí)例第3部分(參考版)
2024-11-18 07:40本頁面
【正文】 。 (mousedown, onMouseDown, false)。 } /script /body /html 為 canvas 動態(tài)添加事件 var canvas = (drawbroad)。 (x, y, 50, 50)。 if(x250||x0)fx*=1。 x+=v*fx。 var x=150,y=0,fx=fy=1,v=20。f0039。)。).getContext(39。 } =function(){ var ctx=$(39。 height:300px。 /canvas /body /html （ 2）示例的執(zhí)行結(jié)果 動畫示例 !DOCTYPE html html 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 28/29 頁 28 head meta charset=utf8 / titleCanvas javascript api demo/title link href= rel=stylesheet type=text/css media=screen / script type=text/javascript src= style type=text/css canvas { border:1px 000 solid。left:0px。 /canvas canvas id=mySwimmerCanvas width=400 height=400 style=zindex:1。left:0px。 canvas id=myWaterCanvas width=400 height=400 style=zindex:2。 ()。 = round。 = 10。 (200, 175)。 ()。 = 000000。 (190positionX,250positionY)。 // 畫右邊的腿 ()。 = round。 = 10。 (200, 100)。 ()。 = 000000。 (175positionX,140positionY)。 // 畫右邊的手臂 ()。 = round。 = 10。 (200,70+positionY)。 = 5。 = 000000。 ()。 var centerY = 50。 } ()。 } else{ positionX = 0。 if (positionX 30){ positionX += 1。 var contextSwimmer = (2d)。 var positionY = 0。 } // 游泳者的畫布 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 25/29 頁 25 setInterval(drawSwimmer, 30)。 // sets the fourth color = linearGrad。00ffff39。)。 // sets the second color (.50, 39。0099ff39。)。 (0, 39。 = .50。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= // 水的畫布 function drawWater() { var canvasWater = (myWaterCanvas)。 （ 2）注意定時頻率的不準(zhǔn)確性 由于這種繪圖頻率很大程度上取決于支持 canvas 的底層 JavaScript 引擎的渲染速度以及相應(yīng)繪圖函數(shù)的復(fù)雜性，因而實(shí)際運(yùn)行的結(jié)果往往都是要慢于指定繪 圖頻率的。 應(yīng)用定時器創(chuàng)建動畫控制線程最終實(shí)現(xiàn)定時重繪 （ 1） setInterval 或者 setTimeout 函數(shù) 使用 setInterval 或者 setTimeout 函數(shù)創(chuàng)建動畫控制線程，其中 setInterval 函數(shù)重復(fù)地執(zhí)楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 24/29 頁 24 行所提供的代碼，而 setTimeout 函數(shù)只在所提供的時間過去之后執(zhí)行一次。 一旦調(diào)用了 restore 函數(shù)，狀態(tài)堆中最后的狀態(tài)將會彈出，并恢復(fù)所有的設(shè)置。再次改變填充顏色繪制更小一點(diǎn)的藍(lán)色四方形。 /script /head body section header h12D Canvas section 示例 /h1 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的瀏覽器不支持 2D Canvas 相關(guān)的技術(shù) /div /p /section /body /html （ 3）代碼示例的說明 第一步是用默認(rèn)設(shè)置畫一個大四方形，然后保存一下狀態(tài)。block39。nocanvas39。none39。my_canvas39。 (70,70,130,130)。 /** 回到上一個狀態(tài)，也就是當(dāng)前的藍(lán)色之前的顏色狀態(tài)，即白色 */ ()。 /** 將填充顏色由白色改變?yōu)樗{(lán)色的繪圖屬性設(shè)置 */ =blue。 (30,30,210,210)。 /** 保存當(dāng)前的默認(rèn)繪圖屬性設(shè)置 */ ()。 if() { var context = (2d)。my_canvas39。 !DOCTYPE HTML html head 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 22/29 頁 22 meta equiv=ContentType content=text/html。而每 一次調(diào)用 restore 函數(shù)，上一個保存的狀態(tài)就從數(shù)據(jù)堆中彈出，所有的繪圖屬性設(shè)定都將恢復(fù)為上一次的設(shè)置。 保存和恢復(fù)繪圖的各個屬性狀態(tài)量 （ 1）應(yīng)用 ()函數(shù)實(shí)現(xiàn)保存狀態(tài)，而應(yīng)用 ()函數(shù)實(shí)現(xiàn)恢復(fù)狀態(tài) Canvas 的狀態(tài)就是當(dāng)前畫面應(yīng)用的所有樣式和變形的一個快照，并且 Canvas 狀態(tài)是以堆（ stack）的方式保存的。但要注意的是，每一幀只應(yīng)該重繪屏幕上有變化的區(qū)域。 ? 繪制動畫圖形的新一幀或者執(zhí)行渲染幀的處理 ? 如果已經(jīng)在前面保存了 Canvas 的區(qū)域狀態(tài)，在繪制動畫新的幀之前則需要恢復(fù)該狀態(tài)。為此，最簡單的做法就是用 clearRect()函數(shù)。 動畫編程的基本步驟 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 21/29 頁 21 （ 1） 創(chuàng)建動畫中的某一幀，主要的編程實(shí)現(xiàn)步驟如下 。 要處理和實(shí)現(xiàn)動畫方面的編程實(shí)現(xiàn)，需要通過創(chuàng)建多重的畫布來實(shí)現(xiàn)；另外，動畫必須是隨著時間的推移而進(jìn)行控制。因此，要移動該圖形或者圖像，必須要重新繪制出它 —— 但重新繪制它將是相當(dāng)費(fèi)時 的，而且性能依賴于電腦的速度。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 20/29 頁 20 } }。). = 39。 (39。). = 39。 } else { (39。 // 藍(lán)色通道 } (imagedata, 0, 0)。 // 紅色通道 [i+1] = 255 [i+2]。 i n。 var imagedata = (0,0, , )。 = 。 if() { var context = (2d)。my_canvas39。 （ 3）示例 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 19/29 頁 19 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。每一個像素有 RGB 值和透明度 alpha 值（其值為 0 至 255，包括 alpha 在內(nèi) !），
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1