【正文】 /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。my_canvas39。 if() { var context = (2d)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 7/29 頁 7 (,39。)。rgb(255,0,255)39。 (1,39。)。 (0, 0, 400, 350)。 (,39。)。rgba(255,255,0,)39。 (1,39。)。 loopIndex 10。 = radialGradientTwo。 ()。 } } else { (39。). = 39。 (39。). = 39。 } }。 對圖像顯示輸出的不同方式 （ 1）以圖像的原始尺寸顯示輸出 為此可以采用三個參數(shù)的調(diào)用方式實現(xiàn)以圖像的原始尺寸顯示輸出，代碼示例：drawImage(image, dx, dy)，其中的 (dx,dy)代表目標(biāo)坐標(biāo)位置，該坐標(biāo)定位圖像的左上角。代碼示例： drawImage(image, dx, dy, dw, dh)，提供了目標(biāo)的寬度和高度，圖像會被縮放以適應(yīng)目標(biāo)寬度和高度。 也就是可以理解成從原圖中取出一個矩形區(qū)域，然后把它畫到畫布上目標(biāo)區(qū)域。 /*或創(chuàng)建一個新圖片。 = ‘’。如果試圖在圖片未完全加載之前就將 其呈現(xiàn)到 Canvas 對象所在的繪圖區(qū)域中，那么在 Canvas 對象的繪圖區(qū)域中將不會顯示出任何的圖片。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 11/29 頁 11 對于大多數(shù)支持 canvas標(biāo)簽的瀏覽器中的圖片還沒有加載完成時，如果此時在代碼中顯示輸出該圖像，將不會看到圖像。為此，在程序中可以使用圖像對象的 onload 函數(shù)識別圖像是否加載完畢。 = function() { 在此完成對圖像的顯示和處理等功能操作 } = ‘’。 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 imageObj = new Image()。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 12/29 頁 12 var sourceY = 0。 var sourceHeight = 。 }。 } /script /body /html 圖像剪裁的應(yīng)用示例 !DOCTYPE html html head meta equiv=ContentType content=text/html。 var context=(2d)。 =39。 =function(){ /** 以圖像的原始尺寸顯示 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 13/29 頁 13 */ (imageObj ,0,0)。 /** 裁剪圖像中的某一塊區(qū)域，然后再在目標(biāo)位置和以指定的尺寸顯示出 */ (imageObj ,50,50,150,150,125,150,150,150)。 charset=gb18030 titleHTML5 的 2D Canvas 圖像示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。)。 var someOneImageTagObject = new Image()。 = function() { for(var loopIndex = 0。 loopIndex++){ 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 14/29 頁 14 (someOneImageTagObject,0 + loopIndex * 50, 0 + loopIndex * 25,100,100)。 } else { (39。). = 39。 (39。). = 39。 } }。 charset=gb18030 titleHTML5 的 2D Canvas 圖像示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。)。 var someOneImageTagObject = new Image()。 = function() { //首先調(diào)用該方法繪制原始圖像 (someOneImageTagObject,0,0,100,100)。 }。my_canvas39。none39。nocanvas39。block39。 /script /head body section header h1HTML5 的 2D Canvas 圖像示例 /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 在水平和垂直方向重復(fù)圖像填充 —— 位圖填充 我們在游戲中經(jīng)常會遇到圖像平鋪的需求，例如游戲中的磚頭、地面、草叢和天空等，都可以通過平鋪一張小圖來實現(xiàn)。 （ 1） createPattern() 方法在指定的方向內(nèi)重復(fù)指定的元素 元素可以是圖片 、視頻，或者其他 canvas 元素。 （ 2） createPattern() 方法的定義語法 (image,repeat|repeatx|repeaty|norepeat)。其中的參數(shù)值的含義如下： 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 17/29 頁 17 1) image 規(guī)定要使用的圖片、畫布或視頻元素。該模式在水平和垂直方向重復(fù)。 4) repeaty 該模式只在垂直方向重復(fù)。 （ 3）重復(fù)圖像填充示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。my_canvas39。 if() { var context = (2d)。 = 。repeat39。 //指定填充樣式 = repeatFillImagePattern。 。 } else { (39。). = 39。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 18/29 頁 18 (39。). = 39。 } }。 （ 2 ） 更 新 圖 像 像 素 的 方 法(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]) 其中的 imagedata（類型為 CanvasPixelArray）為像素數(shù)組，用于儲存 width*height*4 個像素值。 而其中的 dx、 dy分別表示重繪圖像的起點橫坐標(biāo)、起點縱坐標(biāo)， irtyX、 dirtyY、 dirtyWidth、dirtyHeight 分別為起點橫坐標(biāo)、起點縱坐標(biāo)、寬度和高度。 charset=gb18030 titleHTML5 的 2D Canvas 圖像示例頁面 /title