《HTML5網(wǎng)頁前端設計》教案第7章HTML5畫布API一、教學目標：了解畫布的概念和畫布坐標系；掌握畫布的創(chuàng)建方法；掌握繪制路徑與矩形的方法；掌握繪制圖片與文本的方法；掌握設置畫筆顏色與樣式的方法；掌握繪畫的保存與恢復功能的應用；掌握圖像變形與剪裁的應用。二、教學重點和難點：重點：掌握繪制路徑、矩形、圖片和文本的方法；難點：掌握圖像變形與剪裁的應用。三、教學方法與手段：采取互動式教學方法，理論教學使用多媒體投影教室。四、課程簡介：本章主要介紹HTML5畫布API的功能與應用。HTML5畫布API主要用于網(wǎng)頁上圖案或圖片的特效處理以及動畫效果顯示。HTML5畫布API需要使用JavaScript代碼實現(xiàn)繪制效果。通過對畫筆顏色、樣式的設置，可以繪制出自定義的線條或填充顏色；通過對圖形的變形和剪裁，可以在畫布上實現(xiàn)更豐富的繪制效果。五、教學基本內容：7.1畫布（Canvas）概述 7.1.1HTML5畫布 HTML5畫布API提供了<canvas>標簽用于在網(wǎng)頁上創(chuàng)建矩形的畫布區(qū)域，配合以JavaScript即可在畫布區(qū)域動態(tài)繪制需要的內容。目前所有的主流瀏覽器都提供了對于HTML5畫布API的支持。7.1.2畫布坐標 圖7-SEQ圖7-\*ARABIC1HTML5畫布坐標系示意圖7.1.3主流瀏覽器支持情況一覽表7-SEQ表7-\*ARABIC1主流瀏覽器對HTML5畫布API支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上1.5及以上1.0及以上1.3及以上9.0及以上 7.2HTML5畫布API的應用 7.2.1檢查瀏覽器支持情況<canvas>對不起，您的瀏覽器不支持HTML5畫布功能</canvas> 7.2.2創(chuàng)建畫布 基本語法結構如下：<canvasid="自定義id名稱"width="寬度值"height="高度值"></canvas>其中<canvas>標簽的id屬性為必填內容，使用JavaScript進行繪圖時可根據(jù)id找到需要繪圖的畫布，該名稱可自定義。width和height屬性分別表示畫布的寬度和高度，可填入長度數(shù)值，其默認單位均為像素（px）。7.2.3畫布繪制方法 在HTML5中，<canvas>元素本身沒有繪圖能力，所有的繪圖代碼需要使用JavaScript完成。首先需要在JavaScript中創(chuàng)建context對象，然后用該對象動態(tài)的繪制畫布內容。其語法結構如下：<script>//根據(jù)id找到指定的畫布varc=document.getElementById("畫布id");//創(chuàng)建2D的context對象varctx=c.getContext("2d");//繪圖代碼......</script>7.2.4繪制路徑 繪制路徑主要有以下4種方法：beginPath()：用于新建一條路徑，也是圖形繪制的起點。每次調用該方法都會清空之前的繪圖軌跡記錄，重新開始繪制新的圖形。closePath()：該方法用于閉合路徑。當執(zhí)行該方法時會從畫筆的當前坐標位置繪制一條線段到初始坐標位置來閉合圖形。此方法不是必需的，若畫筆的當前坐標位置就是初始坐標位置，則該方法可以省略不寫。stroke()：在圖形輪廓勾勒完畢后需要執(zhí)行該方法才能正式將路徑渲染到畫布上。fill()：可以使用該方法為圖形填充顏色，生成實心的圖形。若之前并未執(zhí)行closePath()方法來閉合圖形，則在此方法被調用時會自動生成線段連接畫筆當前坐標位置和初始坐標位置，形成閉合圖形然后再進行填充顏色。繪制線段在HTML5畫布中通過指定畫筆的初始坐標位置和移動到的新坐標位置可以進行線段的繪制。繪制線段主要有以下3種方法：moveTo(x,y):將當前的畫筆直線移動到指定的(x,y)坐標上，并且不留下移動痕跡。用該方法可以定義線段的初始位置。lineTo(x,y)：將當前的畫筆直線移動到指定的(x,y)坐標上，并且畫出移動痕跡。用該方法可以進行線段的繪制。stroke()：在繪制完成后使用該方法可以在畫布上一次性渲染出效果。在使用stroke()方法之前的所有繪制動作均為路徑繪制，可以將其理解為是透明的軌跡，該軌跡不會顯示在畫布上。繪制三角形三角形的繪制其實就是分別繪制三條線段，并且讓它們首尾相連組成形狀。在HTML5畫布中繪制三角形會用到上一小節(jié)中繪制線段的moveTo()方法和lineTo()方法。繪制圓弧除了直線路徑外，HTML5畫布還可以在JavaScript中使用arc()函數(shù)繪制圓弧。其基本語法格式如下：arc(x,y,radius,startAngle,endAngle,anticlockwise)arc()函數(shù)共包含了6個參數(shù)，解釋如下：x和y表示圓心在(x,y)坐標位置上；radius為圓弧的半徑，默認單位為像素；startAngle為開始的角度，endAngle為結束的角度；anticloclwise指的是繪制方向，可填入一個布爾值。其中true表示順時針繪制，false表示逆時針繪制。注意：arc()函數(shù)中的角度單位是弧度，使用時不可直接填入度數(shù)單位，需要進行轉換。轉換公式如下：弧度=π/180x度數(shù)在JavaScript中轉換公式寫法如下：radians=Math.PI/180*degrees其中特殊弧度半圓(180°)轉換后弧度為π，圓(360°)轉換后弧度為2π。在開發(fā)過程中遇到這兩種情況可以免于換算，直接使用轉換結果。繪制曲線在HTML5畫布API中繪制曲線的原理來自于貝塞爾曲線（BezierCurve）。貝塞爾曲線又稱為貝茲曲線或者貝濟埃曲線，由法國數(shù)學家PierreBezier發(fā)明，是計算機圖形學中非常重要的參數(shù)曲線，也是應用于2D圖形應用程序的數(shù)學曲線。貝塞爾曲線由曲線與節(jié)點組成，節(jié)點上有控制線和控制點可以拖動，曲線在節(jié)點的控制下可以伸縮（如圖7-8所示）。一些矢量圖形軟件用其來精確繪制曲線，如AdobePhotoshop、AdobeIllustrator等。圖7-SEQ圖7-\*ARABIC8貝茲爾曲線（來源：萬維網(wǎng)聯(lián)盟W3C，2013）貝塞爾曲線一般用來繪制較為復雜的規(guī)律圖形。根據(jù)控制點數(shù)量不同，分為二次貝塞爾曲線和三次貝塞爾曲線。二次貝塞爾曲線語法結構如下：quadraticCurveTo(cp1x,cp1y,x,y)其中(cp1x,cp1y)為控制點的坐標，(x,y)為結束點的坐標。三次貝塞爾曲線語法結構如下：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)其中(cp1x,cp1y)為控制點一的坐標，(cp2x,cp2y)為控制點二的坐標，(x,y)為結束點的坐標。與矢量軟件不同的是，HTML5畫布API編程時沒有貝塞爾曲線預覽圖。在沒有直接視覺反饋的前提下，繪制復雜的曲線圖形顯得較為困難，需要花費更多的時間進行繪制。繪制其他自定義形狀和繪制三角形的原理類似，如果自定義多條線段的起始和結束為止，令它們互相連結可以形成多樣化的自定義形狀。7.2.5繪制矩形 繪制帶邊框的空心矩形在HTML5中可以使用strokeRect()方法繪制帶邊框的矩形，其語法結構如下：strokeRect(x,y,width,height)其中x和y規(guī)定了矩形左上角的坐標位置為(x,y)，width為矩形的寬度，height為矩形的高度，默認單位均為像素(px)。用顏色填充矩形在HTML5中使用fillRect()方法繪制填充顏色的實心矩形，其語法結構如下：fillRect(x,y,width,height)該方法與strokeRect()方法的參數(shù)類似，其中x和y規(guī)定了矩形左上角的坐標位置為(x,y)，width為矩形的寬度，height為矩形的高度，默認單位為像素(px)。畫筆默認是黑色的，如果需要切換成其他顏色，可以在繪制之前重新定義context對象中的fillStyle屬性。清空矩形區(qū)域在HTML5中使用clearRect()方法清空矩形的區(qū)域，其語法結構如下：clearRect(x,y,width,height)同樣是x和y規(guī)定了矩形左上角的坐標位置為(x,y)，width為矩形的寬度，height為矩形的高度，默認單位為像素(px)。該方法類似橡皮擦的功能，可以將畫布上覆蓋的顏色擦除，顯露出畫布本身的背景顏色。7.2.6繪制圖片 裝載圖片在JavaScript中，可以直接使用Image()構造函數(shù)來創(chuàng)建一個新的圖片對象。例如，裝載一張名稱為hello.png的圖片：varimg=newImage();img.src="hello.png";此時圖片只是指定了來源，暫時還未繪制在畫布上，因此看不到任何效果。繪制圖片圖片裝載完畢后，可以使用drawImage()方法繪制圖片，語法如下：ctx.drawImage(image,x,y);其中image是圖片對象的自定義名稱，x和y指的是該圖片在畫布中的起始位置在(x,y)坐標上。例如：varimg=newImage();img.src="ballon.jpg";ctx.drawImage(img,0,0);上述代碼表示繪制一張名稱為balloon.jpg的圖片，并將其左上角放置在原點上。此時繪制的圖片尺寸與原圖一致。有時由于圖片過大導致加載時間較長，在圖片還未加載完畢時就執(zhí)行了drawImage()方法可能導致圖片無法正常顯示。此時可以將繪制圖片的代碼片段放在圖片對象的onload事件函數(shù)中，修改后的代碼如下：varimg=newImage();img.src="ballon.jpg";img.onload=function(){ctx.drawImage(img,0,0);}上述代碼表示必須等待圖片加載完畢才執(zhí)行圖像繪制方法。縮放圖片圖片的大小可以在繪制時進行縮放。語法如下：drawImage(image,x,y,width,height)該方法比普通繪制圖片方法多出兩個參數(shù)width和height，分別用于指定縮放后圖片的寬度和高度，其默認單位均為像素。例如：varimg=newImage();img.src="ballon.jpg";img.onload=function(){ctx.drawImage(img,0,0,20,20);}上述代碼表示將從原點(0,0)坐標開始繪制一張名稱為balloon.jpg的圖片，其尺寸縮放為寬和高均為20像素。圖片切割繪制圖片時可以根據(jù)實際需要對原圖進行切割，只顯示指定的區(qū)域內容。語法結構如下：drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)該方法有9個參數(shù)，其中image是需要切割的圖片對象；sx和sy表示將從原圖片的(sx,sy)坐標位置進行切割；切割的矩形寬度為sWidth，高度為sHeight，其默認單位均為像素。dx和dy表示切割后的圖片將顯示在畫布的（dx，dy）坐標位置上，并且其寬度縮放為dWidth、高度縮放為dHeight。例如：varimg=newImage();img.src="ballon.jpg";img.onload=function(){ctx.drawImage(img,20,20,10,10,0,0,30,30);}上述代碼表示將一張名稱為balloon.jpg的圖片從(20,20)的坐標點開始切割一塊10x10像素大小的方塊，將切割下來的方塊放置在畫布原點(0,0)上，并將該圖片放大至30x30像素的比例。7.2.7繪制文本 HTML5畫布API提供了兩種繪制文本的方法，fillText()方法用于繪制實心文本內容，strokeText()方法用于為文本內容描邊。繪制實心文本內容語法結構如下：fillText(text,x,y,maxWidth)繪制空心文本內容語法結構如下：strokeText(text,x,y,maxWidth)其中text表示文本內容，實際填寫時需要在文本內容的前后加上引號。x和y表示文本將繪制在(x,y)坐標上。maxWidth指的是繪制文本的最大寬度，其默認單位為像素。maxWidth不是必填內容，根據(jù)實際需要可以省略。在繪制之前也可以使用context對象的font屬性自定義字體風格，該屬性默認的字體大小為10px、字體格式為sans-serif。該屬性的語法規(guī)則與CSS樣式中的font屬性完全相同，這里不再贅述?？梢灾匦略O置font屬性來改變字體樣式，例如：ctx.font="bold20pxserif";上述代碼表示字體設置為加粗、字大小為20像素、serif字體樣式。文本的默認對齊方式是start，可以使用context對象中的textAlign屬性重新設置文本的對齊方式。textAlign屬性有5種屬性值，解釋如下：start：文本從指定位置開始，該屬性值為默認值。end：文本從指定位置結束。left：文本左對齊。right：文本右對齊。center：文本居中顯示。例如：ctx.textAlign="center";上述代碼表示將文本設置為居中顯示的效果。7.2.8顏色與樣式 顏色設置繪圖時默認的畫筆顏色為黑色，這意味著在畫布中繪制的輪廓顏色和圖形填充色在缺省屬性聲明時均為黑色。在CanvasRenderingContext2D接口中有兩個和顏色相關的重要屬性：strokeStyle和fillStyle，利用這兩個屬性可以重新定義線條顏色和圖形的填充色。其基本語法格式如下：//設置圖形輪廓的顏色ctx.strokeStyle="顏色值";//設置圖形的填充顏色ctx.fillStyle="顏色值";在這里顏色值需要使用CSS樣式中的聲明標準，可以是顏色名、RGB格式或者十六進制碼格式的完整或簡寫版。顏色透明度HTML5畫布可以使用半透明色作為圖形輪廓或填充顏色。其語法結構如下：ctx.globalAplpha=透明度值;畫布中所有的圖形都被context對象中globalAlpha的屬性值影響透明度，有效值范圍是從0.0到1.0。其中0.0表示完全透明，1.0表示完全不透明。例如，設置透明度為0.5（半透明）寫法如下：ctx.globalAplpha=0.5;globalAlpha適合批量設置圖形顏色。如果需要為圖形單獨設置透明度，可以使用rgba方法。其語法結構如下：rgba(red,green,blue,透明度值)和rgb方法類似，前三個參數(shù)用法完全一樣，只多出最后一個參數(shù)用于設置透明度。rgba的透明度有效值范圍和globalAlpha一樣，是從0.0（完全透明）到1.0（完全不透明）。當透明度值處于1.0時，效果和rgb設置的顏色完全一致。例如：rgba(255,0,0,1)等同于rgb(255,0,0)顏色漸變在HTML5中，可以使用顏色漸變效果來設置圖形的輪廓或填充顏色，分為線性漸變與徑向漸變兩種。首先可以創(chuàng)建具有指定漸變區(qū)域的canvasGradient對象。創(chuàng)建線性漸變canvasGradient對象的語法格式如下：ctx.createLinearGradient(x1,y1,x2,y2);其中(x1,y1)表示漸變的初始位置坐標，(x2,y2)表示漸變的結束位置坐標。創(chuàng)建徑向漸變canvasGradient對象的語法格式如下：ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);其中前三個參數(shù)表示漸變的初始位置是圓心在(x1,y1)上的半徑為r1的圓，后三個參數(shù)表示漸變的結束位置是圓心在(x2,y2)上的半徑為r2的圓。使用這兩種漸變方法創(chuàng)建canvasGradient對象后均可繼續(xù)使用addColorStop()方法為漸變效果定義顏色與漸變點。其語法格式如下：gradient.addColorStop(position,color);其中position參數(shù)需要填寫一個0-1之間的數(shù)值，表示漸變點的相對位置。例如0.5表示在漸變區(qū)域的正中間。color參數(shù)需要填寫一個有效的顏色值，可參考CSS顏色標準的聲明方式。以上兩種方法所創(chuàng)建出來的顏色漸變效果均可當作是一種特殊的顏色值直接賦值給fillStyle屬性。例如：//創(chuàng)建線性漸變varlinear=ctx.createLinearGradient(0,0,150,150);linear.addColorStop(0,"rgb(0,0,255)");linear.addColorStop(1,"rgb(255,0,0)");//畫圖形ctx.fillStyle=linear;ctx.fillRect(0,0,150,150);上述代碼表示創(chuàng)建了一個寬高均為150像素的矩形，其左上角頂點在原點(0,0)的位置。其填充顏色不是一般的純色，而是由左上角點(0,0)開始填充藍色向右下角點(150,150)漸變?yōu)榧t色的填充效果。圖案填充在CanvasRenderingContext2D接口中的createPattern()方法可以將外部圖片素材用于填充畫布上繪制的圖形。其語法結構如下：createPattern(image,type)其中image必須是一個Image對象或canvas對象的引用。type用于設置圖片填充時是否重復，只能為以下4個值之一：repeat、repeat-x、repeat-y和no-repeat。將該方法的返回值賦值給fillStyle屬性即可。和繪制圖片一樣，最好將相關代碼寫到圖像的onload事件函數(shù)中，以免圖片尚未加載完成無法顯示正確的效果。例如：varimg=newImage();img.src="ballon.jpg";img.onload=function(){varpattern=ctx.createPattern(img,"repeat");ctx.fillStyle=pattern;ctx.fillRect(0,0,100,100);}線條樣式context對象中帶有一系列屬性可以自定義線條效果，包括線條的粗細、顏色和拐角接連處的形狀。在CanvasRenderingContext2D接口中有一系列屬性可用于設置線條樣式，如表7-2所示。表7-SEQ表7-\*ARABIC2context對象的常用屬性一覽表屬性名稱屬性值解釋lineWidthCSS長度值<length>設置線條寬度（默認單位：像素）。strokeStyleCSS顏色值<color>設置線條顏色。lineJoinmiterroundbevel設置線條之間連接處的拐角樣式，其中miter為默認值。lineCapbuttsquareround設置線條兩端頂點的樣式，其中butt為默認值。getLineDash()Array數(shù)組用于獲取當前線段的樣式，通常用于獲取虛線線段的樣式設置數(shù)組。setLineDash(segments)void使用數(shù)組參數(shù)設置線條為自定義線段長度和間隔長度的虛線樣式。lineDashOffsetCSS數(shù)值用于設置虛線樣式時線段的偏移量。其中l(wèi)ineJoin屬性表示線段之間連接處的拐角樣式，有三種屬性解釋如下：miter：線段連接處的拐角為尖角，該屬性值為默認值；round：線段連接處的拐角為圓形；bevel：線段連接處的拐角為平角。具體的顯示效果如圖7-20所示。圖7-SEQ圖7-\*ARABIC20設置lineJoin不同屬性值對應的效果lineCap屬性表示線段兩邊頂端的形狀，有三種屬性值解釋如下：butt：線段的末端以方形結束，該屬性值為默認值；round：線段的末端以半圓形凸起結束；square：線段的末端加了一個方形，該方形的寬度與線段同寬，高度為寬度的一半。具體的顯示效果如圖7-19所示。圖7-SEQ圖7-\*ARABIC21設置lineCap不同屬性值對應的效果setLineDash(segments)方法可以將線條設置為虛線，其中參數(shù)segments位置需要填入一個包含了交替繪制線段與間隔長度的Array數(shù)組。例如：ctx.setLineDash([10,5]);上述代碼表示設置線條樣式為10像素的線段與5像素的間隔交替出現(xiàn)形成虛線。需要注意一種特殊情況：當數(shù)組元素為奇數(shù)時，所有數(shù)組元素會自動重復一次。例如使用setLineDash([5,10,5])方法設置線條樣式，然后用getLineDash()方法獲取的返回值會是[5,10,5,5,10,5]的形式。原因是如果填入的數(shù)組元素個數(shù)為奇數(shù)，則第一個和最后一個元素均是用來規(guī)定虛線中的線段樣式的，此時缺少最后一個間隔的長度規(guī)定。因此需要進行一次數(shù)組元素重復以保證每一個線段與其后面的間隔長度都得到設置。陰影效果在CanvasRenderingContext2D接口中具有4個屬性可以為畫布中的圖形或文本設置陰影效果。如表7-3所示。表7-SEQ表7-\*ARABIC3HTML5畫布陰影效果相關屬性一覽屬性名稱屬性值解釋shadowOffsetX數(shù)值用于設置陰影在x軸方向的延伸距離，默認值為0。shadowOffsetY數(shù)值用于設置陰影在y軸方向的延伸距離，默認值為0。shadowBlur數(shù)值用于設置陰影的模糊程度，默認值為0。shadowColor顏色值用于設置陰影的顏色，默認值為透明度為0的黑色。7.2.9保存和恢復 在HTML5畫布中，save()和restore()方法是繪制復雜圖形的快捷方式，用于記錄或恢復畫布的繪畫狀態(tài)。在繪制復雜圖形時有可能臨時需要進行多個屬性的設置更改（例如畫筆的粗細、填充顏色等效果），在繪制完成后又要重新恢復初始設置進行后續(xù)的操作。7.2.10變形 在HTML5畫布中有四種方法可以對圖像進行變形處理：移動translate：移動圖形到新的位置，圖形的大小形狀不變。旋轉rotate：以畫布的原點(0,0)坐標為參照點進行圖形旋轉，圖形的大小形狀不變。縮放scale：對圖形進行指定比例的放大或縮小，圖形的位置不變。矩陣變形transform：使用數(shù)學矩陣多次疊加形成更復雜的變化。移動translate在HTML5畫布中可以使用translate()方法對圖形進行移動處理。其基本格式如下：translate(x,y)其中參數(shù)x指的是在水平方向x軸上的偏移量，參數(shù)y指的是在垂直方向y軸上的偏移量。參數(shù)為正數(shù)表示按照坐標系的正方向移動，參數(shù)為負數(shù)表示沿著坐標系的相反方向移動。也可以理解為將原點移動到了指定的坐標(x,y)上，移動效果如圖7-25所示。圖7-SEQ圖7-\*ARABIC25畫布坐標系的移動效果旋轉rotate在HTML5畫布中可以使用rotate()方法對圖形進行旋轉處理。其基本格式如下：rotate(angle)其中angle參數(shù)需要填入順時針旋轉的角度，需要換算成弧度單位。如果填入負值則可以逆時針旋轉。例如，需要逆時針旋轉90°的寫法如下：ctx.rotate(-Math.PI/2);默認情況下，rotate()方法以畫布的原點(0,0)坐標為參照點進行圖形旋轉，如果需要指定其他參照點，也可以事先使用translate()方法轉移參照點坐標的位置?？s放scale在HTML5畫布中可以使用scale()方法對圖形進行縮放處理。其基本格式如下：scale(x,y)其中參數(shù)x表示水平方向x軸的縮放倍數(shù)，參數(shù)y表示垂直方向y軸的縮放倍數(shù)，允許填入整數(shù)或浮點數(shù)，但必須為正數(shù)。填入數(shù)值1.0時為正常顯示，無縮放效果。例如：ctx.scale(0.5,2);上述代碼表示寬度縮小為原先的0.5倍，高度放大為原先的2倍。對一個寬100像素、高50像素的矩形使用該方法表示寬度變?yōu)?0像素，高度變?yōu)?00像素。矩陣變形transform在HTML5畫布中transform()方法使用矩陣多次疊加形成更復雜的變化，也可以通過合適的參數(shù)實現(xiàn)之前的移動、旋轉和縮放效果。其基本格式如下：transform(m11,m12,m21,m22,dx,dy)參數(shù)解釋如下：m11：水平縮放。m12：水平傾斜。m21：垂直傾斜。m22：垂直縮放。dx：水平移動。dy：垂直移動。7.2.11剪裁 在HTML5畫布中可以使用clip()方法對圖形進行剪裁處理。該方法一旦執(zhí)行，前面的繪制圖形代碼將起到剪裁畫布的作用，超過該圖形所覆蓋部分的所有其他區(qū)域都將無法進行繪制。例如：//創(chuàng)建剪裁的區(qū)域ctx.rect(0,0,100,100);//剪裁畫布ctx.clip();上述代碼表示將畫布剪裁為左上角在原點、寬和高均為100像素的矩形大小。剪裁是不可逆的，下一次使用clip()方法也只能在當前的保留區(qū)域繼續(xù)進行剪裁。如果需要剪裁區(qū)域為圓形，可以使用ctx.arc()方法。例如：//開始繪制路徑ctx.beginPath();//創(chuàng)建圓弧剪裁的區(qū)域