通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實例第3部分-文庫吧資料
2024-11-22 07:40本頁面
【正文】 像素的順序從左至右，從上到下，按行存儲。 /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 使用 getImageData,putImageData 實現(xiàn)像素處理和實現(xiàn)圖像濾鏡效果 （ 1）獲取圖像像素的方法 (sx,sy,sw,sh) 該方法返回一個類型為 CanvasPixelArray 的 imagedata 對象，其中的 sx、 sy參數(shù)分別表示獲取區(qū)域的起點橫坐標(biāo)、起點縱坐標(biāo)，而 sw、 sh 參數(shù)分別表示所獲取區(qū)域的寬度和高度。block39。nocanvas39。none39。my_canvas39。 }。 //填充畫布 (0,0,800,600)。)。 = function() { //創(chuàng)建填充樣式，全方向（ X、 Y 兩個方向）平鋪 var repeatFillImagePattern = (someOneImageTagObject,39。 var someOneImageTagObject = new Image()。)。 charset=gb18030 titleHTML5 的 2D Canvas 圖像示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 5) norepeat 該模式只顯示一次（不重復(fù)）。 3) repeatx 該模式只在水平方向 重復(fù)。 2) repeat 默認(rèn)。 該方法創(chuàng)建一個位圖填充，并返回一個 CanvasPattern 對象。被重復(fù)的元素可用于繪制 /填充矩形、圓形或線條等等。這時可以使用 createPattern 方法創(chuàng)建一個重復(fù)圖像的模型，并賦給 CanvasRenderingContext2D 的 fillStyle（作為幾何形狀的填充）或 StrokeStyle（作為幾何形狀的邊框）屬性，最后再使用 fillRect 方法將模型填充到畫布。 } }。). = 39。 (39。). = 39。 } else { 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 16/29 頁 16 (39。 //繪制將局部區(qū)域進(jìn)行放大后的圖像 (someOneImageTagObject,23,5,57,80,110,0,100,100)。 = 。 if() { var context = (2d)。my_canvas39。 /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 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 15/29 頁 15 圖像局部裁剪及顯示示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。block39。nocanvas39。none39。my_canvas39。 } }。 loopIndex 7。 = 。 if() { var context = (2d)。my_canvas39。 } } /script /body /html 圖像平移示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 /** 縮放圖像 */ (imageObj ,125,50,150,50)。39。 var imageObj =new Image()。 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)。 = 。 (imageObj,sourceX,sourceY, sourceWidth, sourceHeight)。 var sourceWidth = 。 = function() { /* 繪制出完整的整個圖像 */ var sourceX = 0。 var context=(2d)。 （ 3）示例頁面 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 var someOneImage = new Image()。因此如果希望顯示出一個圖像，則需要等待該圖像完全加載完畢。因此，在Canvas 對象所在的繪圖區(qū)域中顯示圖像之前，應(yīng)確保圖像已經(jīng)加載完畢。 */ （ 2）應(yīng)用圖片對象 onload 函數(shù)識別圖像是否加載完畢 由于瀏覽器通常會在頁面腳本執(zhí)行的同時異步加載圖片，因此必須要等待圖片完全加載后才能對其進(jìn)行處理操作。 var someOneImage = new Image()。 楊教授工作室 精心創(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’ )。 （ 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)位置上。 （ 2）縮放及調(diào)整尺寸 此時則需要采用重載的 drawImage 函數(shù)，并以五個參數(shù)的調(diào)用方式 傳遞參數(shù)。 /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è)提升必讀系列資料 楊教授
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1