通過代碼示例跟我學html5相關技術——html5中的canvas標簽及應用實例第3部分(編輯修改稿)

　

【文章內容簡介】 nction() { for(var loopIndex = 0。 loopIndex 7。 loopIndex++){ 楊教授工作室 精心創作的優秀程序員 職業提升必讀系列資料 楊教授工作室，版權 所有，盜版必究 ， 14/29 頁 14 (someOneImageTagObject,0 + loopIndex * 50, 0 + loopIndex * 25,100,100)。 } }。 } else { (39。my_canvas39。). = 39。none39。 (39。nocanvas39。). = 39。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 相關的技術 /div /p /section /body /html 楊教授工作室 精心創作的優秀程序員 職業提升必讀系列資料 楊教授工作室，版權 所有，盜版必究 ， 15/29 頁 15 圖像局部裁剪及顯示示例 !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()。 = 。 = function() { //首先調用該方法繪制原始圖像 (someOneImageTagObject,0,0,100,100)。 //繪制將局部區域進行放大后的圖像 (someOneImageTagObject,23,5,57,80,110,0,100,100)。 }。 } else { 楊教授工作室 精心創作的優秀程序員 職業提升必讀系列資料 楊教授工作室，版權 所有，盜版必究 ， 16/29 頁 16 (39。my_canvas39。). = 39。none39。 (39。nocanvas39。). = 39。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 相關的技術 /div /p /section /body /html 在水平和垂直方向重復圖像填充 —— 位圖填充 我們在游戲中經常會遇到圖像平鋪的需求，例如游戲中的磚頭、地面、草叢和天空等，都可以通過平鋪一張小圖來實現。這時可以使用 createPattern 方法創建一個重復圖像的模型，并賦給 CanvasRenderingContext2D 的 fillStyle（作為幾何形狀的填充）或 StrokeStyle（作為幾何形狀的邊框）屬性，最后再使用 fillRect 方法將模型填充到畫布。 （ 1） createPattern() 方法在指定的方向內重復指定的元素 元素可以是圖片 、視頻，或者其他 canvas 元素。被重復的元素可用于繪制 /填充矩形、圓形或線條等等。 （ 2） createPattern() 方法的定義語法 (image,repeat|repeatx|repeaty|norepeat)。 該方法創建一個位圖填充，并返回一個 CanvasPattern 對象。其中的參數值的含義如下： 楊教授工作室 精心創作的優秀程序員 職業提升必讀系列資料 楊教授工作室，版權 所有，盜版必究 ， 17/29 頁 17 1) image 規定要使用的圖片、畫布或視頻元素。 2) repeat 默認。該模式在水平和垂直方向重復。 3) repeatx 該模式只在水平方向 重復。 4) repeaty 該模式只在垂直方向重復。 5) norepeat 該模式只顯示一次（不重復）。 （ 3）重復圖像填充示例 !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()。 = 。 = function() { //創建填充樣式，全方向（ X、 Y 兩個方向）平鋪 var repeatFillImagePattern = (someOneImageTagObject,39。repeat39。)。 //指定填充樣式 = repeatFillImagePattern。 //填充畫布 (0,0,800,600)。 。 }。 } else { (39。my_canvas39。). = 39。none39。 楊教授工作室 精心創作的優秀程序員 職業提升必讀系列資料 楊教授工作室，版權 所有，盜版必究 ， 18/29 頁 18 (39。nocanvas39。). = 39。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 相關的技術 /div /p /section /body /html 使用 getImageData,putImageData 實現像素處理和實現圖像濾鏡效果 （ 1）獲取圖像像素的方法 (sx,sy,sw,sh) 該方法返回一個類型為 CanvasPixelArray 的 imagedata 對象，其中的 sx、 sy參數分別表示獲取區域的起點橫坐標、起點縱坐標，而 sw、 sh 參數分別表示所獲取區域的寬度和高度。 （ 2 ） 更 新 圖 像 像 素 的 方 法(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]) 其中的 imagedata（類型為 CanvasPixelArray）為像素數組，用于儲存 width*height*4 個像素值。每一個像素有 RGB 值和透明度 alpha 值（其值為 0 至 255，包括 alpha 在內 !），像素的順序從左至右，從上到下，按行存儲。 而其中的 dx、 dy分別表示重繪圖像的起點橫坐標、起點縱坐標， irtyX、 dirtyY、 dirtyWidth、dirtyHeight 分別為起點橫坐標、起點縱坐標、寬度和高度。 （ 3）示例