HTML5+CSS3網(wǎng)頁設計基礎教程第5章-圖形圖像繪制

1、第1頁第5章 圖形圖像繪制本章概述 本章的學習目標主要內(nèi)容第2頁本章概述canvas是HTML5的一個新增元素。通過canvas元素，用戶可以在Web中繪制各種圖形。雖然以前也有基于XML的繪圖技術，如VML何SVG等，但canvas是基于像素的繪制，開發(fā)者通過Javascript腳本可以輕松繪圖。繪制圖形時，在頁面上放置一個canvas元素，就相當于在頁面上放置了一塊畫布，可以在這塊畫布中進行繪制圖形，但是并不是用鼠標進行畫圖，實際上，canvas只是一塊無色透明的區(qū)域，只是一個javascript API，需要通過javascript編寫繪制圖形的腳本。本章就來介紹canvas元素的使用。

2、第3頁本章的學習目標理解與canvas元素相關的基礎知識使用canvas元素繪制簡單圖形使用canvas元素繪制貝塞爾曲線使用canvas元素繪制變形圖形使用canvas元素添加豐富圖形效果使用canvas元素對圖像進行處理使用canvas元素對圖形圖像進行組合和混合操作使用canvas元素將文字繪制到Web上使用canvas繪圖時狀態(tài)的保存與恢復第4頁主要內(nèi)容5.1 canvas元素基礎 5.2 繪制簡單圖形5.3 繪制貝塞爾曲線5.4 繪制變形圖形5.5 豐富圖形效果5.6 圖像處理 5.7 繪制文字5.8 本章小結 第5頁5.1 canvas元素基礎 5.1.1 添加canvas元素5.

3、1.2 檢測瀏覽器支持5.1.3 使用Canvas繪制圖形5.1.4 Canvas坐標系第6頁5.1.1 添加canvas元素在HTML頁面中添加canvas元素的方法和其他元素的添加一樣，代碼如下：第7頁5.1.2 檢測瀏覽器支持并不是所有的瀏覽器都支持canvas元素，因此，在使用時需要先進行檢測。檢測的方法有兩種：一種是為不支持canvas元素的瀏覽器提供替代顯示的內(nèi)容；另一種是使用JavaScript代碼進行檢測。第8頁5.1.3 使用Canvas繪制圖形canvas元素本身并不能實現(xiàn)圖形繪制功能，繪制圖形的工作需要由JavaScript來完成。使用JavaScript可以在canva

4、s元素內(nèi)部添加線條、圖片和文字，也可以在其中繪畫，還能夠加入高級動畫。第9頁5.1.4 Canvas坐標系在canvas元素中繪制圖形時，需要為圖形指定擺放位置。fillRect(50,50,100,100)的前兩個參數(shù)就是指定所繪制矩形的x軸和y軸坐標值。在canvas中，坐標原點（0,0）位于canvas元素的左上角，x軸水平向右延伸，y軸向下延伸。第10頁主要內(nèi)容5.1 canvas元素基礎 5.2 繪制簡單圖形5.3 繪制貝塞爾曲線5.4 繪制變形圖形5.5 豐富圖形效果5.6 圖像處理 5.7 繪制文字5.8 本章小結 第11頁5.2 繪制簡單圖形5.2.1 繪制直線5.2.2 繪制

5、矩形5.2.3 繪制弧線與圓形5.2.4 繪制三角形5.2.5 清空畫布第12頁5.2.1 繪制直線在canvas上繪制簡單直線，主要用到3個方法：moveTo、lineTo和stroke。如果要設置直線端點的樣子，可以使用lineCap屬性指定。第13頁5.2.2 繪制矩形繪制矩形時，需要用到fillStyle屬性、fillRect方法，還可以使用strokeStyle和strokeRect方法。其中，fillStyle屬性用于指定填充顏色；fillRect方法用于以指定的填充顏色繪制一個矩形；strokeStyle指定邊框線顏色；strokeRect以指定的顏色繪制矩形輪廓。第14頁5.2

6、.3 繪制弧線與圓形HTML5提供了專門用于繪制圓形或弧線的arc方法和arcTo方法。arc方法的使用格式如下：arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas畫布上繪制以坐標點(x,y)為圓心、半徑為radius的圓上的一段弧線。這段弧線的起始弧度是startRad，結束弧度是endRad。這里的弧度是以x軸正方向(時鐘三點鐘)為基準、進行順時針旋轉的角度來計算的。anticlockwise表示是以逆時針方向還是順時針方向開始繪制，如果為true則表示逆時針，如果為false則表示順時針。anticlockwise參數(shù)是可

7、選的，默認為false，即順時針。第15頁5.2.4 繪制三角形和繪制矩形一樣，繪制三角形可以是實心的，也可以是空心的（也就是沒填充色，光有輪廓線）。繪制實心三角形使用fill()方法，繪制空心三角形用stroke()方法。第16頁5.2.5 清空畫布清空畫布的方法有以下3種：第一種，也就是最簡單的辦法，由于canvas每當高度或寬度被重設時，畫布內(nèi)容就會被清空。第二種方法，使用clearRect方法。第三種方法，類似于方法2，可以用某一特定顏色填充畫布，從而達到清空的目的。第17頁主要內(nèi)容5.1 canvas元素基礎 5.2 繪制簡單圖形5.3 繪制貝塞爾曲線5.4 繪制變形圖形5.5 豐富

8、圖形效果5.6 圖像處理 5.7 繪制文字5.8 本章小結 第18頁5.3 繪制貝塞爾曲線5.3.1 二次貝塞爾曲線5.3.2 三次貝塞爾曲線第19頁5.3.1 二次貝塞爾曲線繪制貝塞爾曲線需要用到quadraticCurveTo()方法，使用方法如下：quadraticCurveTo(cpx,cpy,x,y)第20頁5.3.2 三次貝塞爾曲線三次貝塞爾曲線則需要使用到3個控制點，繪制方法如下：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)第21頁主要內(nèi)容5.1 canvas元素基礎 5.2 繪制簡單圖形5.3 繪制貝塞爾曲線5.4 繪制變形圖形5.5 豐富圖形效

9、果5.6 圖像處理 5.7 繪制文字5.8 本章小結 第22頁5.4 繪制變形圖形5.4.1 保存與恢復canvas狀態(tài)5.4.2 移動坐標空間5.4.3 旋轉坐標空間5.4.4 縮放圖形5.4.5 矩陣變換第23頁5.4.1 保存與恢復canvas狀態(tài)可以通過下面兩個方法來實現(xiàn)保存繪圖屬性和獲取屬性：context.save(); context.restore(); 第24頁5.4.2 移動坐標空間canvas坐標空間默認以畫布左上角(0,0)為原點，x軸水平向右為正向，y軸垂直向下為正向，該坐標空間的單位通常為像素。在繪制圖形時，可以使用translate方法移動坐標空間，使畫布的變換矩

10、陣發(fā)生水平和垂直方向的偏移，其用法如下：context.translate(dx,dy);第25頁5.4.3 旋轉坐標空間若要旋轉坐標空間，應使用rotate方法。rotate方法用于以原點為中心旋轉canvas，實質仍是旋轉canvas上下文對象的坐標空間，用法如下：context.rotate(angle);第26頁5.4.4 縮放圖形縮放圖形主要通過scale()方法來實現(xiàn)，具體使用格式如下：ctx.scale(x,y);第27頁5.4.5 矩陣變換矩陣變換主要通過transform()方法來實現(xiàn)。setTransform方法用于將當前的變化矩陣重置為最初的矩陣，然后以相同的參數(shù)調用tr

11、ansform方法，即先set（重置），再transform（變換）具體使用格式如下：context.transform(m11,m12,m21,m22,dx,dy);第28頁主要內(nèi)容5.1 canvas元素基礎 5.2 繪制簡單圖形5.3 繪制貝塞爾曲線5.4 繪制變形圖形5.5 豐富圖形效果5.6 圖像處理 5.7 繪制文字5.8 本章小結 第29頁5.5 豐富圖形效果5.5.1 應用不同的線型5.5.2 繪制線性漸變5.5.3 繪制徑向漸變5.5.4 繪制圖案5.5.5 設置圖形的透明度5.5.6 創(chuàng)建陰影第30頁5.5.1 應用不同的線型前面繪制過程中使用到了一些線條的方法和屬性。通過

12、lineWidth、lineCap、lineJoin、miterLimit屬性，可以設置線條的粗細、端點樣式、兩線段鏈接處樣式和繪制交點的方式。第31頁5.5.2 繪制線性漸變前面繪制過程中使用到了一些線條的方法和屬性。通過lineWidth、lineCap、lineJoin、miterLimit屬性，可以設置線條的粗細、端點樣式、兩線段鏈接處樣式和繪制交點的方式。createLinearGradient方法的使用如下：CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1)addColorStop方法的使用如下：CanvasGradi

13、ent.addColorStop(offset, color)第32頁5.5.3 繪制徑向漸變徑向漸變，其實就是環(huán)形的漸變，由圓心（或者是較小的同心圓）開始向外擴散漸變的效果。線性漸變指定了起點和終點，徑向漸變則指定了開始的結束園的圓心和半徑。徑向漸變使用createRadialGradient來獲得Canvas的CanvasGradient對象，所以addColorStop方法也是通用的。使用方法如下：CanvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)第33頁5.5.4 繪制圖案canvas中，createPat

14、tern方法用來實現(xiàn)圖案效果，在指定的方向內(nèi)重復指定的元素。元素可以是圖片、視頻，或者其他canvas元素。被重復的元素可用于繪制/填充矩形、圓形或線條等等。其用法如下：context.createPattern(image,repeat|repeat-x|repeat-y|no-repeat);第34頁5.5.5 設置圖形的透明度canvas繪圖中，有兩種設置透明度的方法：globalAlpha屬性和rgba方法。globalAlpha屬性適合為大量圖形設置相同的透明度。rgba方法則是通過設置色彩透明度的參數(shù)來為圖形設置不同的透明度。第35頁5.5.6 創(chuàng)建陰影canvas提供了繪制元素陰

15、影的功能，主要的屬性包括：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。其中，shadowColor定義陰影顏色樣式，shadowBlur定義陰影模糊系數(shù)，shadowOffsetX定義陰影X軸偏移量，shadowOffsetY定義陰影Y軸偏移量。第36頁主要內(nèi)容5.1 canvas元素基礎 5.2 繪制簡單圖形5.3 繪制貝塞爾曲線5.4 繪制變形圖形5.5 豐富圖形效果5.6 圖像處理 5.7 繪制文字5.8 本章小結 第37頁5.6 圖像處理 5.6.1 裁剪圖像5.6.2 像素處理5.6.3 組合圖形5.6.4 混合圖像第38頁5

16、.6.1 裁剪圖像canvas的圖像剪裁功能是指，在畫布內(nèi)使用路徑，只繪制該路徑所包括區(qū)域內(nèi)的圖像，不繪制路徑外部的圖像。使用圖像上下文對象的不帶參數(shù)的clip方法來實現(xiàn)canvas元素的圖像剪裁功能。該方法使用路徑來對canvas畫布設置一個剪裁區(qū)域。因此，必須先創(chuàng)建好路徑。路徑創(chuàng)建完成后，調用clip方法設置剪裁區(qū)域。第39頁5.6.2 像素處理像素處理需要用到getImageData和putImageData兩個方法，先用getImageData復制canvas畫布中的像素數(shù)據(jù)，然后對獲取的像素數(shù)據(jù)進行處理，最后再通過putImageData將處理完的數(shù)據(jù)粘貼到canvas畫布。第40頁

17、5.6.3 組合圖形HTML5有11種組合圖形的方式，只要將其設置到context.globalCompositeOperation即可。使用方法為：context.globalCompositeOperation = type第41頁5.6.4 混合圖像圖像混合需要使用到canvas的globalCompositeOperation屬性，使用方法為：context.globalCompositeOperation=屬性值第42頁主要內(nèi)容5.1 canvas元素基礎 5.2 繪制簡單圖形5.3 繪制貝塞爾曲線5.4 繪制變形圖形5.5 豐富圖形效果5.6 圖像處理 5.7 繪制文字5.8 本章

18、小結 第43頁5.7 繪制文字5.7.1 繪制填充文字5.7.2 文字相關屬性5.7.3 繪制輪廓文字5.7.4 獲取文字寬度5.7.5 文字繪制實戰(zhàn)第44頁5.7.1 繪制填充文字fillText方法用填充的方式繪制字符串，該方法的使用格式如下：void fillText(text,x,y,maxWidth);第45頁5.7.2 文字相關屬性在使用canvas進行文字的繪制之前，可以先對該對象的有關文字繪制的屬性進行設置，這些屬性如下：font：指定正在繪制的文字的樣式。如果要在繪制文字時改變字體樣式，只需要更改該屬性的值即可。默認的字體樣式為10px sans-serif。例如：context.font = 20pt Times New Roman;textAlign：指定正在繪制的文字的對齊方式，有l(wèi)eft（左對齊）、right（右對