通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實(shí)例（第3部分-全文預(yù)覽
【正文】 控制。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 20/29 頁(yè) 20 } }。 (39。 } else { (39。 // 紅色通道 [i+1] = 255 [i+2]。 var imagedata = (0,0, , )。 if() { var context = (2d)。 （ 3）示例 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 19/29 頁(yè) 19 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 /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 實(shí)現(xiàn)像素處理和實(shí)現(xiàn)圖像濾鏡效果 （ 1）獲取圖像像素的方法 (sx,sy,sw,sh) 該方法返回一個(gè)類型為 CanvasPixelArray 的 imagedata 對(duì)象，其中的 sx、 sy參數(shù)分別表示獲取區(qū)域的起點(diǎn)橫坐標(biāo)、起點(diǎn)縱坐標(biāo)，而 sw、 sh 參數(shù)分別表示所獲取區(qū)域的寬度和高度。nocanvas39。my_canvas39。 //填充畫布 (0,0,800,600)。 = function() { //創(chuàng)建填充樣式，全方向（ X、 Y 兩個(gè)方向）平鋪 var repeatFillImagePattern = (someOneImageTagObject,39。)。 5) norepeat 該模式只顯示一次（不重復(fù)）。 2) repeat 默認(rèn)。被重復(fù)的元素可用于繪制 /填充矩形、圓形或線條等等。 } }。 (39。 } else { 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 16/29 頁(yè) 16 (39。 = 。my_canvas39。block39。none39。 } }。 = 。my_canvas39。 /** 縮放圖像 */ (imageObj ,125,50,150,50)。 var imageObj =new Image()。 = 。 var sourceWidth = 。 var context=(2d)。 var someOneImage = new Image()。因此，在Canvas 對(duì)象所在的繪圖區(qū)域中顯示圖像之前，應(yīng)確保圖像已經(jīng)加載完畢。 var someOneImage = new Image()。 （ 3）對(duì)圖像進(jìn)行裁剪的形式顯示輸出 可以以九個(gè)參數(shù)的調(diào)用方式調(diào)用重載的 drawImage 函數(shù)，代碼示例： drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth,destHeight)，其中的image 代表需要進(jìn)行裁剪的圖像，以圖像來(lái)源的（ sourceX, sourceY）原始坐標(biāo)為開(kāi)始剪出一個(gè)寬度和高度為（ sourceWidth, sourceHeight）的矩形區(qū)域，并把它縮放使之適應(yīng)目標(biāo)寬度和高度（ destWidth,destHeight），然后把它放置在畫布的（ destX, destY）所指示的坐標(biāo)位置上。 /script /head body section header 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 8/29 頁(yè) 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 頁(yè) 9 圖像剪裁技術(shù)及應(yīng)用 示例 圖像剪裁及相關(guān) 的主要 API 函數(shù) 在畫布上裁剪圖形主要是通過(guò)重載 drawImage()函數(shù)而實(shí)現(xiàn)此功能， drawImage()函數(shù)有三種調(diào)用形式：可以使用三個(gè)、五個(gè)或者是九個(gè)參數(shù)的調(diào)用方式。nocanvas39。my_canvas39。 (loopIndex * 25,loopIndex * 25, loopIndex * 10, 0, * 2, true)。 for(var loopIndex = 0。)。rgba(255,0,0,)39。 = radialGradientOne。)。rgb(255,255,0)39。)。 } }。 (39。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 5/29 頁(yè) 5 } else { (39。 (, yellow)。 // 繪制徑向漸變 fillColorRadial = (450,300,0, 450,300,200)。 (,green)。 (With text too!, 300,50)。 (,yellow)。 //再創(chuàng)建一個(gè)線性漸變顏色方式以控制文本的顯示顏色 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 4/29 頁(yè) 4 var fillColorText = (300,50,600,50)。 (,green)。 if() { var context = (2d)。 （ 2）示例頁(yè)面 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 addColorStop (offset, color) 函數(shù)為被標(biāo)明為在給定的偏移量上漸變的顏色指明了顏色過(guò)渡點(diǎn)，可以為該函數(shù)指定一個(gè)在 0 和 1 之間的比例值位置的偏移量 offset，以這一偏移量為依據(jù)來(lái)開(kāi)始過(guò)渡到下一種顏色； offset 為 0 的地方為開(kāi)始地點(diǎn)的顏色， offset 為 1 的則為結(jié)束地點(diǎn)的顏色。而在 Canvas 中，不僅可以只指定開(kāi)始和結(jié)尾的兩點(diǎn)，中途的位置也能任意指定，所以可以實(shí)現(xiàn)各種奇妙的效果。楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 1/29 頁(yè) 1 目 錄 HTML5 中的 Canvas 標(biāo)簽及應(yīng)用實(shí)例（第 3 部分） ............................................. 2 漸變（ Gradient）顏色示例 ................................................................................ 2 圖像剪裁技術(shù) 及應(yīng)用示例 .................................................................................. 9 實(shí)現(xiàn)動(dòng)畫相關(guān)示例 ............................................................................................ 20 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 2/29 頁(yè) 2 HTML5 中的 Canvas 標(biāo)簽及應(yīng)用實(shí)例（第 3 部分） 漸變（ Gradient）顏
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1