【正文】 adialGradientTwo = (250,250,0,250,250,300)。 (,39。rgba(255,0,0,)39。)。 (,39。rgba(255,255,0,)39。)。 (1,39。rgba(0,0,255,)39。)。 for(var loopIndex = 0。 loopIndex 10。 loopIndex++){ ()。 = radialGradientTwo。 (loopIndex * 25,loopIndex * 25, loopIndex * 10, 0, * 2, true)。 ()。 ()。 } } else { (39。my_canvas39。). = 39。none39。 (39。nocanvas39。). = 39。block39。 } }。 /script /head body section header 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 8/29 頁 8 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 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 9/29 頁 9 圖像剪裁技術(shù)及應(yīng)用 示例 圖像剪裁及相關(guān) 的主要 API 函數(shù) 在畫布上裁剪圖形主要是通過重載 drawImage()函數(shù)而實(shí)現(xiàn)此功能， drawImage()函數(shù)有三種調(diào)用形式：可以使用三個、五個或者是九個參數(shù)的調(diào)用方式。 對圖像顯示輸出的不同方式 （ 1）以圖像的原始尺寸顯示輸出 為此可以采用三個參數(shù)的調(diào)用方式實(shí)現(xiàn)以圖像的原始尺寸顯示輸出，代碼示例：drawImage(image, dx, dy)，其中的 (dx,dy)代表目標(biāo)坐標(biāo)位置，該坐標(biāo)定位圖像的左上角。 （ 2）縮放及調(diào)整尺寸 此時則需要采用重載的 drawImage 函數(shù)，并以五個參數(shù)的調(diào)用方式 傳遞參數(shù)。代碼示例： drawImage(image, dx, dy, dw, dh)，提供了目標(biāo)的寬度和高度，圖像會被縮放以適應(yīng)目標(biāo)寬度和高度。 （ 3）對圖像進(jìn)行裁剪的形式顯示輸出 可以以九個參數(shù)的調(diào)用方式調(diào)用重載的 drawImage 函數(shù)，代碼示例： drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth,destHeight)，其中的image 代表需要進(jìn)行裁剪的圖像，以圖像來源的（ sourceX, sourceY）原始坐標(biāo)為開始剪出一個寬度和高度為（ sourceWidth, sourceHeight）的矩形區(qū)域，并把它縮放使之適應(yīng)目標(biāo)寬度和高度（ destWidth,destHeight），然后把它放置在畫布的（ destX, destY）所指示的坐標(biāo)位置上。 也就是可以理解成從原圖中取出一個矩形區(qū)域，然后把它畫到畫布上目標(biāo)區(qū)域。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 10/29 頁 10 顯示圖像的應(yīng)用示例 （ 1）創(chuàng)建圖像對象 可以通過 ()函數(shù)抓取頁面上已有的圖片或者應(yīng)用 new Image()創(chuàng)建出一 個新的圖像對象，下面為示例代碼： var myImage = (‘ myimageid’ )。 /*或創(chuàng)建一個新圖片。 var someOneImage = new Image()。 = ‘’。 */ （ 2）應(yīng)用圖片對象 onload 函數(shù)識別圖像是否加載完畢 由于瀏覽器通常會在頁面腳本執(zhí)行的同時異步加載圖片，因此必須要等待圖片完全加載后才能對其進(jìn)行處理操作。如果試圖在圖片未完全加載之前就將 其呈現(xiàn)到 Canvas 對象所在的繪圖區(qū)域中，那么在 Canvas 對象的繪圖區(qū)域中將不會顯示出任何的圖片。因此，在Canvas 對象所在的繪圖區(qū)域中顯示圖像之前，應(yīng)確保圖像已經(jīng)加載完畢。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 11/29 頁 11 對于大多數(shù)支持 canvas標(biāo)簽的瀏覽器中的圖片還沒有加載完成時，如果此時在代碼中顯示輸出該圖像，將不會看到圖像。因此如果希望顯示出一個圖像，則需要等待該圖像完全加載完畢。為此，在程序中可以使用圖像對象的 onload 函數(shù)識別圖像是否加載完畢。 var someOneImage = new Image()。 = function() { 在此完成對圖像的顯示和處理等功能操作 } = ‘’。 （ 3）示例頁面 !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 language= = function() { var canvas=(canvasTagID)。 var context=(2d)。 var imageObj = new Image()。 = function() { /* 繪制出完整的整個圖像 */ var sourceX = 0。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 12/29 頁 12 var sourceY = 0。 var sourceWidth = 。 var sourceHeight = 。 (imageObj,sourceX,sourceY, sourceWidth, sourceHeight)。 }。 = 。 } /script /body /html 圖像剪裁的應(yīng)用示例 !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)。 var context=(2d)。 var imageObj =new Image()。 =39。39。 =function(){ /** 以圖像的原始尺寸顯示 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 13/29 頁 13 */ (imageObj ,0,0)。 /** 縮放圖像 */ (imageObj ,125,50,150,50)。 /** 裁剪圖像中的某一塊區(qū)域，然后再在目標(biāo)位置和以指定的尺寸顯示出 */ (imageObj ,50,50,150,150,125,150,150,150)。 } } /script /body /html 圖像平移示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 圖像示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。my_canvas39。)。 if() { var context = (2d)。 var someOneImageTagObject = new Image()。 = 。 = fu