【正文】 0099ff39。 // sets the fourth color = linearGrad。 if (positionX 30){ positionX += 1。 ()。 = 10。 = 000000。 = round。 ()。 ()。left:0px。).getContext(39。 x+=v*fx。 (mousedown, onMouseDown, false)。 } /script /body /html 為 canvas 動態(tài)添加事件 var canvas = (drawbroad)。 var x=150,y=0,fx=fy=1,v=20。 } =function(){ var ctx=$(39。 /canvas canvas id=mySwimmerCanvas width=400 height=400 style=zindex:1。 = round。 = 000000。 = 10。 (175positionX,140positionY)。 (200,70+positionY)。 var centerY = 50。 var contextSwimmer = (2d)。00ffff39。)。 （ 2）注意定時頻率的不準確性 由于這種繪圖頻率很大程度上取決于支持 canvas 的底層 JavaScript 引擎的渲染速度以及相應繪圖函數(shù)的復雜性，因而實際運行的結果往往都是要慢于指定繪 圖頻率的。 /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 相關的技術 /div /p /section /body /html （ 3）代碼示例的說明 第一步是用默認設置畫一個大四方形，然后保存一下狀態(tài)。my_canvas39。 (30,30,210,210)。 !DOCTYPE HTML html head 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權 所有，盜版必究 ， 22/29 頁 22 meta equiv=ContentType content=text/html。 ? 繪制動畫圖形的新一幀或者執(zhí)行渲染幀的處理 ? 如果已經(jīng)在前面保存了 Canvas 的區(qū)域狀態(tài)，在繪制動畫新的幀之前則需要恢復該狀態(tài)。因此，要移動該圖形或者圖像，必須要重新繪制出它 —— 但重新繪制它將是相當費時 的，而且性能依賴于電腦的速度。). = 39。 i n。my_canvas39。block39。 }。 var someOneImageTagObject = new Image()。 3) repeatx 該模式只在水平方向 重復。這時可以使用 createPattern 方法創(chuàng)建一個重復圖像的模型，并賦給 CanvasRenderingContext2D 的 fillStyle（作為幾何形狀的填充）或 StrokeStyle（作為幾何形狀的邊框）屬性，最后再使用 fillRect 方法將模型填充到畫布。). = 39。 if() { var context = (2d)。nocanvas39。 loopIndex 7。 } } /script /body /html 圖像平移示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title /head body div pcanvas id=canvasTagID width=600 height=400/canvas/p /div script type=text/javascript =function(){ var canvas=(canvasTagID)。 = function() { /* 繪制出完整的整個圖像 */ var sourceX = 0。因此如果希望顯示出一個圖像，則需要等待該圖像完全加載完畢。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權 所有，盜版必究 ， 10/29 頁 10 顯示圖像的應用示例 （ 1）創(chuàng)建圖像對象 可以通過 ()函數(shù)抓取頁面上已有的圖片或者應用 new Image()創(chuàng)建出一 個新的圖像對象，下面為示例代碼： var myImage = (‘ myimageid’ )。block39。 ()。rgba(0,0,255,)39。 var radialGradientTwo = (250,250,0,250,250,300)。 (,39。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。). = 39。 (, black)。 // 為該線性漸變添加漸變顏色 (,red)。 (,black)。 // 設置在長度方向上的不同位置處的漸變的顏色 (,red)。 漸變編程的應用示例 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權 所有，盜版必究 ， 3/29 頁 3 （ 1）漸變編程的三個基本步驟 在顏色的漸變 定義完畢后，漸變對象就可以被賦值給 fillStyle()函數(shù)，當然也可以使用fillText()函數(shù)來繪制出帶有漸變顏色效果的文字信息。 該方法返回一個漸變顏色對象（ CanvasGradient 對象），然后再使用這個對象的addColorStop 方法添加漸變顏色。 （ 2） createRadialGradient (x0,y0,r0,x1,y1,r1)函數(shù) 該函數(shù)被用來創(chuàng)建徑向漸變（也稱反射性漸變），它使用六個參數(shù)以一種圓形或是圓錐形的模式來組合兩種或多種顏色，函數(shù)中的 (x0,y0)代表圓錐的第一個圓的中心， r0 代表第一個圓的半徑， (x1,y1)代表圓錐的第二個圓的中心， r1 代表第二個圓的半徑。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 (,yellow)。 = fillColorText。 (,yellow)。 = fillColorRadial。nocanvas39。 if() { var context = (2d)。 (1,39。)。 loopIndex 10。). = 39。 對圖像顯示輸出的不同方式 （ 1）以圖像的原始尺寸顯示輸出 為此可以采用三個參數(shù)的調用方式實現(xiàn)以圖像的原始尺寸顯示輸出，代碼示例：drawImage(image, dx, dy)，其中的 (dx,dy)代表目標坐標位置，該坐標定位圖像的左上角。 = ‘’。 = function() { 在此完成對圖像的顯示和處理等功能操作 } = ‘’。 var sourceHeight = 。 =39。)。 } else { (39。 } }。 = function() { //首先調用該方法繪制原始圖像 (someOneImageTagObject,0,0,100,100)。nocanvas39。 （ 2） createPattern() 方法的定義語法 (image,repeat|repeatx|repeaty|norepeat)。 （ 3）重復圖像填充示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。repeat39。). = 39。 （ 2 ） 更 新 圖 像 像 素 的 方 法(imagedata,dx,dy[,