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