【正文】 工作室，版權(quán) 所有，盜版必究 ， 9/29 頁 9 圖像剪裁技術(shù)及應(yīng)用 示例 圖像剪裁及相關(guān) 的主要 API 函數(shù) 在畫布上裁剪圖形主要是通過重載 drawImage()函數(shù)而實現(xiàn)此功能， drawImage()函數(shù)有三種調(diào)用形式：可以使用三個、五個或者是九個參數(shù)的調(diào)用方式。block39。nocanvas39。none39。my_canvas39。 ()。 (loopIndex * 25,loopIndex * 25, loopIndex * 10, 0, * 2, true)。 loopIndex++){ ()。 for(var loopIndex = 0。rgba(0,0,255,)39。)。 (,39。rgba(255,0,0,)39。 var radialGradientTwo = (250,250,0,250,250,300)。 = radialGradientOne。rgb(0,255,255)39。)。 (,39。rgb(255,255,0)39。 var radialGradientOne = (400,0,0,400,0,400)。)。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 } }。). = 39。 (39。). = 39。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 5/29 頁 5 } else { (39。 (300,200,500,400)。 (, yellow)。 (, black)。 // 繪制徑向漸變 fillColorRadial = (450,300,0, 450,300,200)。 // 把漸變對象賦值給 fillstyle = fillColordiagonal。 (,green)。 // 為該線性漸變添加漸變顏色 (,red)。 (With text too!, 300,50)。 =40px verdana。 (,yellow)。 (,black)。 //再創(chuàng)建一個線性漸變顏色方式以控制文本的顯示顏色 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 4/29 頁 4 var fillColorText = (300,50,600,50)。 // 把漸變對象賦值給 fillstyle = fillColor。 (,green)。 // 設(shè)置在長度方向上的不同位置處的漸變的顏色 (,red)。 if() { var context = (2d)。my_canvas39。 （ 2）示例頁面 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 漸變編程的應(yīng)用示例 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 3/29 頁 3 （ 1）漸變編程的三個基本步驟 在顏色的漸變 定義完畢后，漸變對象就可以被賦值給 fillStyle()函數(shù)，當(dāng)然也可以使用fillText()函數(shù)來繪制出帶有漸變顏色效果的文字信息。 addColorStop (offset, color) 函數(shù)為被標(biāo)明為在給定的偏移量上漸變的顏色指明了顏色過渡點，可以為該函數(shù)指定一個在 0 和 1 之間的比例值位置的偏移量 offset，以這一偏移量為依據(jù)來開始過渡到下一種顏色； offset 為 0 的地方為開始地點的顏色， offset 為 1 的則為結(jié)束地點的顏色。漸變會在兩個圓中間區(qū)域出現(xiàn)。而在 Canvas 中，不僅可以只指定開始和結(jié)尾的兩點，中途的位置也能任意指定，所以可以實現(xiàn)各種奇妙的效果。 該方法返回一個漸變顏色對象（ CanvasGradient 對象），然后再使用這個對象的addColorStop 方法添加漸變顏色。楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 1/29 頁 1 目 錄 HTML5 中的 Canvas 標(biāo)簽及應(yīng)用實例（第 3 部分） ............................................. 2 漸變（ Gradient）顏色示例 ................................................................................ 2 圖像剪裁技術(shù) 及應(yīng)用示例 .................................................................................. 9 實現(xiàn)動畫相關(guān)示例 ............................................................................................ 20 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 2/29 頁 2 HTML5 中的 Canvas 標(biāo)簽及應(yīng)用實例（第 3 部分） 漸變（ Gradient）顏色 示例 Canvas 支持線性和徑向方向的漸變顏色 漸變是指從一種顏色向另一種顏色變化的填充，在顏色相交的地方做融合。 相關(guān)的函數(shù) （ 1） createLinearGradient()函數(shù) 該函數(shù)被用來創(chuàng)建線性的漸變（從開始地點到結(jié)束地點，顏色呈直線的徐徐變化的效果），它沿著一條由兩個點 (x0,y0)和 (x1,y1)來標(biāo)識的直線產(chǎn)生一個漸變，這兩個點分別是漸變的起點和終點。為了實現(xiàn)線性的漸變的效果，繪制時必須制定開始和結(jié)束的顏色。 （ 2） createRadialGradient (x0,y0,r0,x1,y1,r1)函數(shù) 該函數(shù)被用來創(chuàng)建徑向漸變（也稱反射性漸變），它使用六個參數(shù)以一種圓形或是圓錐形的模式來組合兩種或多種顏色，函數(shù)中的 (x0,y0)代表圓錐的第一個圓的中心， r0 代表第一個圓的半徑， (x1,y1)代表圓錐的第二個圓的中心， r1 代表第二個圓的半徑。 （ 3）設(shè)置漸變顏色相關(guān)的函數(shù) addColorStop 由于 createLinearGradient 函數(shù)和 createRadialGradient 函數(shù)只是設(shè)置漸變的方式和位置，而漸變的具體顏色則由 addColorStop 函數(shù)實現(xiàn)。 當(dāng)然，如果 offset 大于 1 或者小于 0，會發(fā)生 INDEX_SIZE_ERR 異常。 1) 創(chuàng)建漸變對象并設(shè)置漸變的方式和區(qū)域的位置； 2) 為漸變對象設(shè)置顏色，指明過渡方式； 3) 在 context 上為填充樣式或者描邊樣式設(shè)置漸變。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。)。 // 創(chuàng)建一個線性漸變方式 var fillColor = (50,50, 150,50)。 (,black)。 (,yellow)。 // 繪制矩形 (50,50,100,100)。 (,red)。 (,green)。 = fillColorText。 =top。 // 再創(chuàng)建一個線性漸變顏色方式以設(shè)置對角線上的漸變 var fillColordiagonal = (50,200, 100,450)。 (,black)。 (,yellow)。 // 繪制矩形 (50,225, 100,250)。 (0, red)。 (, green)。 = fillColorRadial。 ()。my_canvas39。none39。nocanvas39。block39。 /script /head body section header 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