1、HTML5移動(dòng)開(kāi)發(fā) Canvas篇內(nèi)容大綱1. canvas簡(jiǎn)介2. canvas基礎(chǔ)應(yīng)用3. canvas動(dòng)畫(huà)1、canvas簡(jiǎn)介 canvas 元素本身沒(méi)有繪圖能力，所有的繪制工作必須通過(guò) JavaScript實(shí)現(xiàn)。 畫(huà)布是一個(gè)矩形區(qū)域，可以控制其每一像素。 canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。2、基礎(chǔ)應(yīng)用-創(chuàng)建canvas元素您的瀏覽器不支持HTML5。 該文本內(nèi)容只在瀏覽器不支持html5時(shí)，顯示在網(wǎng)頁(yè)上。canvas的坐標(biāo)系統(tǒng)。canvas的路徑繪制方法 使用路徑，可以繪制線條、連續(xù)的曲線以及復(fù)合圖形。常用方法如下： beginPath丟棄任何當(dāng)前定義

2、的路徑并且開(kāi)始一條新的路徑。它把當(dāng)前的點(diǎn)設(shè)置為 (0,0)。 moveTo 移動(dòng)路徑的繪圖起點(diǎn) 。 lineTo 從moveTo定義的點(diǎn)開(kāi)始繪制連續(xù)的路徑，或者從上一次的lineTo的終點(diǎn)開(kāi)始繪制。 closePath 連接最后的點(diǎn)和最初的點(diǎn)并關(guān)閉路徑繪制。 fill 用顏色填充路徑 。 stroke 描繪路徑。實(shí)例：繪制直線。function drawLine()var cxt=$(#line)0.getContext(2d);cxt.beginPath();/定義畫(huà)筆的起點(diǎn)cxt.moveTo(10,20);/定義畫(huà)筆的終點(diǎn)cxt.lineTo(100,50);cxt.lineTo(50,

3、90);cxt.stroke(); 知識(shí)點(diǎn)補(bǔ)充 getContext(“2d”) 方法：返回一個(gè)用于在畫(huà)布上繪圖的2d環(huán)境。canvas的常用屬性p設(shè)置繪制顏色的屬性：fillStyle設(shè)置圖形的填充顏色。 c.fillStyle = rgb(255, 0, 0); strokeStyle設(shè)置圖形的描邊顏色。 c. strokeStyle= “rgba(255,0,0,0.5); p設(shè)置繪制線寬的屬性：lineWidth屬性改變描邊線條的寬度。 c.lineWidth = 20;canvas繪制矩形的方法 fillRect(x, y, width, height)方法：參數(shù)x和 y分別表示繪制

4、的矩形的左上角頂點(diǎn)在頁(yè)面上的坐標(biāo)值；參數(shù)weidth和height表示矩形的寬和高，如： cxt.fillRect(0,0,200,100); strokeRect(x, y, width, height)方法，繪制四周產(chǎn)生描邊效果的矩形，如： cxt.strokeRect(50, 50, 100, 100); canvas的曲線繪制方法 語(yǔ)法： arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise); 參數(shù)： centerX, centerY：定義一個(gè)中心點(diǎn)。 radius：半徑。 startingAn

5、gle, endingAngle：起始角度，結(jié)束角度。 antiClockwise：繪圖方向，順時(shí)針或逆時(shí)針。實(shí)例：繪制曲線。 var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d); var centerX = 288; var centerY = 160; var radius = 75; var startingAngle = 1.1 * Math.PI; var endingAngle = 1.9 * Math.PI; var counterclockwise = false

6、; context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise); context.lineWidth = 15; context.strokeStyle = black; / line color context.stroke(); Math.PI表示180度。曲線的詳細(xì)說(shuō)明看看上圖中的外觀 ?；](méi)有超過(guò)部分的一個(gè)假想的圓的周長(zhǎng) 。這個(gè)虛構(gòu)的循環(huán)可以被定義centerX，centerY，和半徑。接下來(lái)，我們可以定義沿所定義的虛圓的周長(zhǎng)有兩個(gè)點(diǎn)的弧本身startingAngle和endin

7、gAngle。這兩個(gè)角度定義的弧度和形式來(lái)自圓心和虛線相交的弧線，我們希望創(chuàng)建兩端?；》椒ǖ淖詈笠粋€(gè)參數(shù)是逆時(shí)針，這是一個(gè)可選的參數(shù)，它定義的兩個(gè)結(jié)束點(diǎn)之間的 ARC路徑的方向。除非另有規(guī)定，這種說(shuō)法是默認(rèn)為false，這將導(dǎo)致順時(shí)針要繪制弧。 canvas的圖形刪除方法 如何刪除已經(jīng)繪制的圖形？刪除圖形只需Javascript API提供的一個(gè)名為clearRect的方法，其原理是使參數(shù)指定的矩形區(qū)域背景變?yōu)橥该鳌?假設(shè)畫(huà)布長(zhǎng)寬分別為500像素，要想刪除整個(gè)畫(huà)布圖形，可以這樣做： c.fillRect(50, 50, 100, 100); c.clearRect(0, 0, 500, 500

8、); 上面的代碼執(zhí)行后，你會(huì)什么都看不到，事實(shí)上填充的矩形已經(jīng)繪制，只是瞬間被刪除了，所以你看不到它。 如果你不清楚畫(huà)布的具體寬高，清除整個(gè)畫(huà)布可以這樣： c.clearRect(0, 0, canvas.width, canvas.height); 刪除畫(huà)布中的區(qū)域刪除畫(huà)布中的區(qū)域 如果你不想刪除整個(gè)畫(huà)布的圖形，而僅僅刪除畫(huà)布中的一個(gè)區(qū)域，假如，你繪制了一個(gè)黑色的正方形，旁邊繪制了一個(gè)紅色的正方形： c.fillRect(50, 50, 100, 100); c.fillStyle = #f00; c.fillRect(200, 50, 100, 100); 接下來(lái)你可以通過(guò)clearRec

9、t刪除黑色背景的正方形而只保留紅色正方形： c.clearRect(50, 50, 100, 100); 練習(xí)：繪制如下圖形。實(shí)例：體會(huì)beginPath的作用。腳本分析var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); ctx.strokeStyle = #666; function useBeginPath() for (var i = 0; i 5; +i) ctx.beginPath(); ctx.rect(10 + i*20, 10 + i*20, 210 - i*40, 210

10、 - i*40); ctx.stroke(); 腳本分析function notUseBeginPath() ctx.beginPath(); for (var i = 0; i 5; +i) ctx.rect(240 + i*20, 10 + i*20, 210 - i*40, 210 - i*40); ctx.stroke(); 3、canvas動(dòng)畫(huà) 圖片處理 陰影處理 繪制筆跡的保存和恢復(fù) 畫(huà)布坐標(biāo)系統(tǒng)的處理 文本處理實(shí)例：簡(jiǎn)易時(shí)鐘 瀏覽效果添加文本fillText方法。 var text = Hello, World!; context.font = italic 60px serif

11、; context.fillText(text, 40, 40); 該文本不是真實(shí)的文字, 而是欄柵化的圖形. 繪制文本有兩種方法, 分別是用于描邊的 strokeText 和用于填字的 fillText 方法. shadowOffsetX, shadowOffsetY 屬性屬性 指定陰影的水平偏移和垂直偏移。較大的值使得陰影化的對(duì)象似乎漂浮在背景的較高位置上。默認(rèn)值是 0。陰影效果得到 Safari 的支持，但是并沒(méi)有得到 FireFox 1.5 或 Opera 9 的支持。shadowBlur 屬性屬性 指定羽化陰影的程度。默認(rèn)值是 0。陰影效果得到 safari 的支持，但是并沒(méi)有得到

12、FireFox 1.5 或 Opera 9 的支持。實(shí)例：小熊頂蘑菇如何在畫(huà)布上放置圖像？如何在畫(huà)布上放置圖像？var c=document.getElementById(myCanvas); var cxt=c.getContext(2d); var img=new Image(); img.src=“flower.png” ;cxt.drawImage(img,0,0); 要繪制的圖像的左上角的位置 。圖片變形圖片變形 drawImage(image, x, y, width, height) var canvas = document.getElementById(myCanvas);v

13、ar ctx = canvas.getContext(2d); ctx.drawImage(myImage, 50, 50, 100, 100);ctx.drawImage(myImage, 125, 125, 200, 50);ctx.drawImage(myImage, 210, 210, 500, 500);圖片裁剪圖片裁剪 drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)參數(shù)很多，但基本上你可以把它想成從原圖中取出一個(gè)矩形區(qū)域，然后把它畫(huà)到畫(huà)布上目標(biāo)區(qū)域

14、里。var canvas = document.getElementById(myCanvas);var ctx = canvas.getContext(2d);ctx.drawImage(myImage, 0, 0, 50, 50, 25, 25, 100, 100);ctx.drawImage(myImage, 125, 125, 100, 100, 125, 125, 150, 150);ctx.drawImage(myImage, 80, 80, 100, 100, 250, 250, 220, 220);onload函數(shù)大多數(shù)支持canvas標(biāo)記的瀏覽器的當(dāng)前版本中，當(dāng)圖片還沒(méi)有加載

15、完成時(shí)，如果你要去畫(huà)它，結(jié)果是什么事情都不會(huì)發(fā)生。也就是說(shuō)，如果你想畫(huà)一個(gè)圖片，你需要等它完全加載。你可以使用圖片對(duì)象的onload函數(shù)來(lái)進(jìn)行判斷。 myImage = new Image();myImage.src = image.png;myImage.onload = function() / Draw image.Translate方法方法 語(yǔ)法：translate(x,y); 功能：轉(zhuǎn)換畫(huà)布的用戶坐標(biāo)系統(tǒng)，為畫(huà)布的變換矩陣添加水平的和垂直的偏移。 實(shí)例：實(shí)例：translate方法的應(yīng)用。方法的應(yīng)用。 var cxt=document.getElementById(canvas) .

16、getContext(2d); cxt.translate(50,50); cxt.strokeStyle=green; cxt.strokeRect(0,0,50,50);此時(shí)的坐標(biāo)(0,0)實(shí)際上是(50,50)。save、restore方法 save() 方法把當(dāng)前狀態(tài)的一份拷貝壓入到一個(gè)保存圖像狀態(tài)的棧中。這就允許您臨時(shí)地改變圖像狀態(tài)，然后，通過(guò)調(diào)用 restore() 來(lái)恢復(fù)以前的值。 restore() 方法從棧中彈出存儲(chǔ)的圖形狀態(tài)并恢復(fù) CanvasRenderingContext2D 對(duì)象的屬性、剪切路徑和變換矩陣的值。 實(shí)例：save()的應(yīng)用。1. var cxt=docu

17、ment.getElementById(canvas).getContext(2d); 2./繪制綠色直線3.cxt.beginPath();4.cxt.moveTo(100,50);5.cxt.lineTo(100,100);6.cxt.strokeStyle=green;7.cxt.stroke();8.cxt.save(); 9./繪制紅色直線10.cxt.beginPath();11.cxt.moveTo(200,50);12.cxt.lineTo(200,100);13.cxt.strokeStyle=red;14. cxt.restore(); 15.cxt.stroke();圖1：實(shí)例：分析結(jié)果。 第8行的save方法保存了畫(huà)布中此時(shí)的畫(huà)筆狀態(tài)，即strokeStyle的屬性值“green”。 第14行的restore方法恢復(fù)了之前的畫(huà)筆狀態(tài)，即畫(huà)筆的green顏色。覆蓋了第14行畫(huà)筆的red值。 因而繪制出2條綠色直線。實(shí)例：save()&restroe()。1. var cxt=document.getElementById(canvas).getContext(2d); 2.cxt.save();3./繪制綠色直線4.cxt.beginP