HTML5圖形與圖像學習導圖8.1.1前端頁面中的圖形圖像Web頁面中的圖形與圖像有四種實現(xiàn)方式：使用PNG、GIF、JPG位圖文件使用CSS3繪制圖形效果（優(yōu)先使用，修改調試成本低，字節(jié)數少）使用Canvas畫布進行像素級的繪制（依賴JS，適合像素級操作、數學圖形繪制，Canvas相當于黑板，任何繪制在上面的圖形如果要移動或改變狀態(tài)，都需要把整塊黑板全部擦除，再重新繪制）使用SVG文件實現(xiàn)矢量圖形及其動畫效果的繪制（適合矢量操作，SVG有無損的圖像質量，良好交互特性，能夠直接嵌入頁面減少HTTP請求，還可以使用CSS進行控制）8.1.2前端頁面坐標系統(tǒng)event.screenX和event.screenY相對于顯示屏的坐標，坐標(0,0)為顯示屏幕的左上角；event.clientX和event.clientY相對于瀏覽器窗口可視區(qū)域的坐標，坐標(0,0)為瀏覽器窗口的左上角；event.offsetX和event.offetY獲得相對于點擊元素的坐標，坐標(0,0)為鼠標所點擊元素的左上角。8.1.2前端頁面坐標系統(tǒng)獲取鼠標點擊頁面的坐標8.2Canvas圖形與圖像繪制8.2.1Canvas元素的定義Canvas元素定義了一個矩形區(qū)域，在該區(qū)域中可以繪制任意圖形，并對每一個像素進行控制。/demo/tearable-cloth/index.html<canvasid="myCanvas"width="600"height="400“style="border:1pxsolid“></canvas>在Canvas中繪制圖形前，需要先調用getContext方法獲得繪圖環(huán)境。8.2.1Canvas元素的定義定義Canvas8.2.2直線線條的繪制8.2.3曲線線條的繪制Canvas中可以繪制二次貝塞爾曲線和三次貝塞爾曲線。二次貝塞爾曲線需要指定三個點，分別是起始點、控制點和終點，控制點主要用于控制曲線的斜率。三次貝塞爾曲線增加了兩個控制點，其中一個控制點控制曲線向上的斜率，另一個控制點控制曲線向下的斜率，加上起始點和終點，三次貝塞爾曲線一共需要指定四個點。繪制曲線線條8.2.3曲線線條的繪制8.2.4矩形的繪制Canvas中矩形的繪制分為兩種，一種是不帶填充效果的矩形，使用rect方法或strokeRect方法繪制；另一種是帶填充效果的，一般是在設置填充顏色后，調用fillRect方法完成矩形的繪制。8.2.5圓的繪制canvas中繪制圓或圓弧采用arc方法，該方法接收6個參數，例如：arc(100,100,50,0,Math.PI*2,0)，其中前兩個參數表示繪制圓的圓心坐標，第三個參數表示半徑，第四個參數表示圓的起始角度，第五個參數表示圓的終止角度，最后一個參數表示按順時針或逆時針繪制，取值0或false表示按順時針繪制，取值1或true表示按逆時針繪制，默認是順時針。圓中的角度定義8.2.5圓的繪制繪制圓8.2.6圖像的繪制創(chuàng)建一個Image對象，在Image對象的onload事件中調用drawImage方法，該方法接收5個參數，第一個參數是創(chuàng)建的Image對象，后面的四個參數分別為圖像的左上角坐標和圖像的寬度和高度。onload事件后，還需要設置Image對象的src屬性。8.2.7文字的繪制font屬性主要設置字體樣式、字號、字體名稱等；lineWidth屬性用來設置線條寬度；strokeText方法用來繪制無填充效果的文字，接收3個參數，第一個參數是要繪制的文字，需要用雙引號標引，后兩個參數則是文字的左上角坐標；textAlign屬性設置文字的對齊方式；fillText方法用來繪制具有填充效果的文字，參數含義同strokeText方法。8.3Canvas圖形變換8.3.1平移變換平移變換使用translate方法，該方法接收兩個參數，分別表示坐標原點沿水平和垂直兩個方向的偏移量，translate方法移動的是坐標原點而不是元素。8.3.3旋轉變換旋轉變換使用rotate方法，該方法只有一個參數，即旋轉角度angle，旋轉角度以順時針方向為正方向，以弧度為單位。注意旋轉中心為畫布的原點，即圖形是以畫布原點進行旋轉，而不是以自身的左上角旋轉。8.3.4狀態(tài)的保存與恢復在有些場合下，可以在變換操作之前先保存畫布當前狀態(tài)，當變換操作完成后，再將之前保存的狀態(tài)進行恢復。Canvas提供了save和restore兩種方法，save方法用來存儲畫布狀態(tài)，包括畫布原點位置，restore方法則用來恢復存儲的畫布狀態(tài)。8.4Canvas繪圖效果8.4.1漸變填充效果線性漸變使用createLinearGredient方法創(chuàng)建線性漸變對象，基本語法為：createLinearGredient(x1,y1,x2,y2)。該語法定義一個待漸變的區(qū)域，X軸是從x1漸變到x2，Y軸是從y1漸變到y(tǒng)2，其中(x1,y1)為漸變的起點，(x2,y2)為漸變的終點；調用addColorStop方法定義漸變填充色，基本語法為：addColorStop(position,color)，該語法為不同位置設置不同的顏色，其中position指定0到1之間的數值，表示填充區(qū)域的位置，第二個參數則是填充的顏色；將創(chuàng)建好的線性漸變對象賦值給context的fillStyle屬性。8.4.1漸變填充效果線性漸變效果8.4.1漸變填充效果徑向漸變使用createRadialGradient方法創(chuàng)建canvasGradient，然后使用addColorStop方法定義漸變顏色。createRadialGredient(x1,y1,r1,x2,y2,r2)方法接收6個參數，其中x1、y1、r1定義一個以(x1,y1)為圓心，半徑為r1的小圓，x2、y2、r2定義一個為以(x2,y2)為圓心，半徑為r2的大圓。8.4.2圖案填充效果在Canvas中，可以利用createPattern方法實現(xiàn)圖案填充效果，基本語法為：createPattern(image,type)。參數image為要引用的image對象或另一個canvas對象，type是所引用對象的平鋪類型，可以取值repeat、repeat-x、repeat-y、no-repeat。創(chuàng)建圖案填充的步驟與創(chuàng)建漸變類似，需要先創(chuàng)建出一個pattern，然后再將pattern賦予fillStyle屬性或strokeStyle屬性。8.4.3透明度效果Canvas中提供了兩種創(chuàng)建透明度效果的方法。一種是使用globalAlpha屬性，例如context.globalAlpha=0.3，該屬性用于為當前canvas中的所有圖形設置相同的透明度；另一種方法是使用rgba(r,g,b,a)，通過設置alpha參數為不同圖形設置不同的透明度。8.4.4陰影效果在Canvas中創(chuàng)建陰影效果，需要用到下面4個屬性：shadowOffsetX（陰影的水平偏移）、shadowOffsetY（陰影的垂直偏移）、shadowBlur（陰影模糊程度）和shadowColor（陰影顏色），默認為黑色，可以添加透明度。8.4.5圖形組合效果當兩個或兩個以上的圖形存在重疊區(qū)域時，默認情況下新繪制的圖形會疊在前一個圖像之上。通過指定圖像globalCompositeOperation屬性的值可以改變圖形的繪制順序或繪制方式，該屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。8.5Canvas綜合應用8.5.1八卦圖與時鐘繪制8.5.2雪花粒子特效8.6SVG圖形繪制8.6.1SVG線條繪制SVG的創(chuàng)建和Canvas類似，只需在HTML中使用svg元素，例如：<svgwidth="300"height="300"style="border:1pxsolid"></svg>。創(chuàng)建SVG畫布后，就可以在上面繪制任意的圖形。直線的繪制，使用line元素。8.6.1SVG線條繪制另一種線條類型是折線，用元素polyline定義，折線實際上是由多個點組成的直線段，其中points是polyline的重要屬性，包含折線中的多個點的定義。8.6.2SVG矩形與多邊形繪制SVG使用rect屬性創(chuàng)建矩形。8.6.2SVG矩形與多邊形繪制多邊形的創(chuàng)建使用polygon元素，用來創(chuàng)建含有不少于三個邊的圖形。polygon和折線很像，它們都是由連接一組點集的直線構成。不同的是polygon的路徑在最后一個點處自動回到第一個點。8.6.3SVG圓與橢圓繪制多邊形的創(chuàng)建使用polygon元素，用來創(chuàng)建含有不少于三個邊的圖形。polygon和折線很像，它們都是由連接一組點集的直線構成。不同的是polygon的路徑在最后一個點處自動回到第一個點。8.6.4SVG路徑繪制path元素是SVG基本圖形中最強大的一個，它不僅能創(chuàng)建其他基本圖形，通過組合還能創(chuàng)建更加復雜的形狀。例如可以用path元素繪制矩形、圓形、橢圓、折線形、多邊形、貝塞爾曲線等。path元素的形狀是通過屬性d來定義的，屬性d的值是一個“命令+參數”的序列。path中常用命令有：M=moveto、L=lineto、H=horizontallineto、V=verticallineto、C=curveto、S=