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