【正文】 0，會(huì)發(fā)生 INDEX_SIZE_ERR 異常。 (,red)。 (0, red)。 /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）示例執(zhí)行的結(jié)果 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 6/29 頁 6 漸變編程的應(yīng)用示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 (0, 0, 400, 350)。 ()。 也就是可以理解成從原圖中取出一個(gè)矩形區(qū)域，然后把它畫到畫布上目標(biāo)區(qū)域。 var imageObj = new Image()。 /** 裁剪圖像中的某一塊區(qū)域，然后再在目標(biāo)位置和以指定的尺寸顯示出 */ (imageObj ,50,50,150,150,125,150,150,150)。 (39。my_canvas39。該模式在水平和垂直方向重復(fù)。 。 charset=gb18030 titleHTML5 的 2D Canvas 圖像示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。my_canvas39。 ? 保存畫布的狀態(tài) 確保在每次繪制動(dòng)畫新一個(gè)幀時(shí)都是使用最初的繪制屬性狀態(tài) —— 特別是要改變一些會(huì)改變 Canvas 的區(qū)域繪畫狀態(tài)的設(shè)置后（比如當(dāng)前應(yīng)用的變形 —— 即移動(dòng)，旋轉(zhuǎn)和縮放；所有的樣式 —— strokeStyle、 fillStyle、 globalAlpha、 lineWidth、 lineCap、 lineJoin、 miterLimit、shadowOffsetX、 shadowOffsetY、 shadowBlur、 shadowColor、 globalCompositeOperation 的值；當(dāng)前的裁切路徑等），又要在畫每一幀時(shí)都使用原始狀態(tài)的繪制屬性。 /** 改變當(dāng)前的默認(rèn)繪圖屬性設(shè)置中的填充的顏色為白色 */ =white。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 23/29 頁 23 } }。0000ff39。 function drawSwimmer(){ var canvasSwimmer = (mySwimmerCanvas)。 // 軀干部分 ()。 (225+positionX,140positionY)。 = 000000。*/ } /style /head body div id=nav_slim/div h1this is a canvas api test page!/h1 canvas id=canvas width=300 height=300this browser does not support canvas.../canvas a href= /a script type=text/javascript var $=function(id){ return (id)。 },100)。 y+=v*fy。top:0px。 // 畫左邊的腿 ()。 = round。 (centerX, centerY+positionY, radius, 0, 2 * , false)。 (0,0,400,400)。 var contextWater = (2d)。 (39。)。因此，還需要考慮和如何處理動(dòng)畫的每一幀內(nèi)容。 // 綠色通道 [i+2] = 255 [i+1]。 （ 2 ） 更 新 圖 像 像 素 的 方 法(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]) 其中的 imagedata（類型為 CanvasPixelArray）為像素?cái)?shù)組，用于儲(chǔ)存 width*height*4 個(gè)像素值。repeat39。 （ 2） createPattern() 方法的定義語法 (image,repeat|repeatx|repeaty|norepeat)。 = function() { //首先調(diào)用該方法繪制原始圖像 (someOneImageTagObject,0,0,100,100)。 } else { (39。 =39。 = function() { 在此完成對圖像的顯示和處理等功能操作 } = ‘’。 對圖像顯示輸出的不同方式 （ 1）以圖像的原始尺寸顯示輸出 為此可以采用三個(gè)參數(shù)的調(diào)用方式實(shí)現(xiàn)以圖像的原始尺寸顯示輸出，代碼示例：drawImage(image, dx, dy)，其中的 (dx,dy)代表目標(biāo)坐標(biāo)位置，該坐標(biāo)定位圖像的左上角。 loopIndex 10。 (1,39。nocanvas39。 (,yellow)。 (,yellow)。 （ 2） createRadialGradient (x0,y0,r0,x1,y1,r1)函數(shù) 該函數(shù)被用來創(chuàng)建徑向漸變（也稱反射性漸變），它使用六個(gè)參數(shù)以一種圓形或是圓錐形的模式來組合兩種或多種顏色，函數(shù)中的 (x0,y0)代表圓錐的第一個(gè)圓的中心， r0 代表第一個(gè)圓的半徑， (x1,y1)代表圓錐的第二個(gè)圓的中心， r1 代表第二個(gè)圓的半徑。 漸變編程的應(yīng)用示例 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 3/29 頁 3 （ 1）漸變編程的三個(gè)基本步驟 在顏色的漸變 定義完畢后，漸變對象就可以被賦值給 fillStyle()函數(shù)，當(dāng)然也可以使用fillText()函數(shù)來繪制出帶有漸變顏色效果的文字信息。 (,black)。 (, black)。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 var radialGradientTwo = (250,250,0,250,250,300)。 ()。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 10/29 頁 10 顯示圖像的應(yīng)用示例 （ 1）創(chuàng)建圖像對象 可以通過 ()函數(shù)抓取頁面上已有的圖片或者應(yīng)用 new Image()創(chuàng)建出一 個(gè)新的圖像對象，下面為示例代碼： var myImage = (‘ myimageid’ )。 = function() { /* 繪制出完整的整個(gè)圖像 */ var sourceX = 0。 } } /script /body /html 圖像平移示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。nocanvas39。). = 39。 3) repeatx 該模式只在水平方向 重復(fù)。 }。my_canvas39。). = 39。 ? 繪制動(dòng)畫圖形的新一幀或者執(zhí)行渲染幀的處理 ? 如果已經(jīng)在前面保存了 Canvas 的區(qū)域狀態(tài)，在繪制動(dòng)畫新的幀之前則需要恢復(fù)該狀態(tài)。 (30,30,210,210)。 /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