【正文】 (mousemove, onMouseMove, false)。 setInterval(function(){ 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 29/29 頁 29 (0, 0, 300, 300)。canvas39。 position:absolute。 ()。 = round。 = 000000。 = 10。 (200,175)。 var radius = 20。 (0,0,400,400)。)。 // sets the first color (.25, 39。 動畫的實(shí)現(xiàn)示例 （ 1）示例頁面及相關(guān)的腳本代碼 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。改變填充顏色畫第二個(gè)小一點(diǎn)的白色四方形，然后再保存一下狀態(tài)。). = 39。 /** 保存改變后的填充顏色為白色的繪圖屬性設(shè) 置 */ ()。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 （ 2）繼續(xù)繪制下一幀 然后按照一定的設(shè)置計(jì)算圖形的變 換，重繪新的動畫圖形式幀，其中繪畫每一幀的編程實(shí)現(xiàn)步驟基本是一樣的。 應(yīng)用多重畫布實(shí)現(xiàn)分層解決圖形重繪問題 在通過不斷重繪畫面以達(dá)到動畫效果的過程中，由于重繪方法首先做的事情都是調(diào)用 clearRect(x, y, width, height)函數(shù)將原畫面清空，這種銷毀而后重繪的實(shí)現(xiàn)方式將會導(dǎo)致丟失之前的畫面，使得開發(fā)人員不得不重繪整幅畫面，這在性能上是難以接受的。none39。 i += 4) { [i+0] = 255 [i+0]。)。 } }。 } else { (39。 = 。 4) repeaty 該模式只在垂直方向重復(fù)。 （ 1） createPattern() 方法在指定的方向內(nèi)重復(fù)指定的元素 元素可以是圖片 、視頻，或者其他 canvas 元素。none39。 var someOneImageTagObject = new Image()。). = 39。 loopIndex++){ 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 14/29 頁 14 (someOneImageTagObject,0 + loopIndex * 50, 0 + loopIndex * 25,100,100)。 charset=gb18030 titleHTML5 的 2D Canvas 圖像示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。 var context=(2d)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 12/29 頁 12 var sourceY = 0。為此，在程序中可以使用圖像對象的 onload 函數(shù)識別圖像是否加載完畢。 /*或創(chuàng)建一個(gè)新圖片。 } }。 } } else { (39。)。 (,39。rgb(255,0,255)39。my_canvas39。none39。 (, green)。 (,black)。 (,green)。 (,black)。 1) 創(chuàng)建漸變對象并設(shè)置漸變的方式和區(qū)域的位置； 2) 為漸變對象設(shè)置顏色，指明過渡方式； 3) 在 context 上為填充樣式或者描邊樣式設(shè)置漸變。為了實(shí)現(xiàn)線性的漸變的效果，繪制時(shí)必須制定開始和結(jié)束的顏色。而在 Canvas 中，不僅可以只指定開始和結(jié)尾的兩點(diǎn)，中途的位置也能任意指定，所以可以實(shí)現(xiàn)各種奇妙的效果。 （ 2）示例頁面 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 (,green)。 (,yellow)。 (,green)。 (, yellow)。 (39。)。)。rgba(255,0,0,)39。 for(var loopIndex = 0。my_canvas39。 /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è)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 9/29 頁 9 圖像剪裁技術(shù)及應(yīng)用 示例 圖像剪裁及相關(guān) 的主要 API 函數(shù) 在畫布上裁剪圖形主要是通過重載 drawImage()函數(shù)而實(shí)現(xiàn)此功能， drawImage()函數(shù)有三種調(diào)用形式：可以使用三個(gè)、五個(gè)或者是九個(gè)參數(shù)的調(diào)用方式。 var someOneImage = new Image()。 var someOneImage = new Image()。 var sourceWidth = 。 var imageObj =new Image()。my_canvas39。 } }。block39。 = 。 (39。被重復(fù)的元素可用于繪制 /填充矩形、圓形或線條等等。 5) norepeat 該模式只顯示一次（不重復(fù)）。 = function() { //創(chuàng)建填充樣式，全方向（ X、 Y 兩個(gè)方向）平鋪 var repeatFillImagePattern = (someOneImageTagObject,39。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 使用 getImageData,putImageData 實(shí)現(xiàn)像素處理和實(shí)現(xiàn)圖像濾鏡效果 （ 1）獲取圖像像素的方法 (sx,sy,sw,sh) 該方法返回一個(gè)類型為 CanvasPixelArray 的 imagedata 對象，其中的 sx、 sy參數(shù)分別表示獲取區(qū)域的起點(diǎn)橫坐標(biāo)、起點(diǎn)縱坐標(biāo)，而 sw、 sh 參數(shù)分別表示所獲取區(qū)域的寬度和高度。 if() { var context = (2d)。 // 紅色通道 [i+1] = 255 [i+2]。 (39。 要處理和實(shí)現(xiàn)動畫方面的編程實(shí)現(xiàn)，需要通過創(chuàng)建多重的畫布來實(shí)現(xiàn)；另外，動畫必須是隨著時(shí)間的推移而進(jìn)行控制。但要注意的是，每一幀只應(yīng)該重繪屏幕上有變化的區(qū)域。my_canvas39。 /** 將填充顏色由白色改變?yōu)樗{(lán)色的繪圖屬性設(shè)置 */ =blue。none39。再次改變填充顏色繪制更小一點(diǎn)的藍(lán)色四方形。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= // 水的畫布 function drawWater() { var canvasWater = (myWaterCanvas)。