HTML5中Canvas元素的使用總結

HTML5中Canvas元素的使用總結

    Canvas提供了開發者自定義繪圖的接口，咱們能夠公國getContext()函數來獲取繪圖上下文進行繪製操做，這個函數中能夠傳入兩個參數，其中第1個參數設置繪圖上下文的類型，比較經常使用的是"2d"，咱們也可使用"webgl"來使用webOpenGL實現3D繪製。本篇博客主要總結2d繪製的相關方法。

1.進行簡單的圖形繪製

    使用Canvas進行平面圖形繪製比較簡單。例如使用以下函數則能夠直接繪製一個矩形區域。

var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.strokeRect(20,20,100,100);

圖形效果以下：

與strokeRect對應，使用fillRect能夠繪製填充矩形，例如：

var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.fillRect(20,20,100,100);

效果以下：

使用clearRect函數能夠進行矩形區域的擦除，示例以下：

var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.strokeRect(20,20,100,100);
		context.clearRect(10,10,100,100);

效果以下圖：

上面的繪製圖形的方法其實是一個複合的函數，其完成了路徑的定義和繪製兩步。咱們也能夠自定義圖形路徑，例如：

var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.beginPath();
		context.moveTo(20,20);
		context.lineTo(20,100);
		context.lineTo(100,100);
		context.closePath();
		context.stroke();

效果以下：

beginPath函數用來開啓一個路徑，moveTo函數用於將畫筆移動到某個點，lineTo函數用來定義一條線，線的起點爲當前畫筆所在位置，參數爲終點位置。closePath函數用來關閉路徑，固然，此函數並不是必定要調用，若是不調用能夠繪製非閉合的圖形。stroke函數用來將已經定義的圖形進行繪製，與其對應還有一個fill函數用來進行填充繪製。

    quadraticCurveTo與bezierCurveTo兩個函數分別用來建立二次與三次貝塞爾曲線路徑，示例以下：

context.moveTo(20,120);
		context.quadraticCurveTo(20,200,100,180);
		context.stroke();
		context.moveTo(20,200);
		context.bezierCurveTo(20,300,60,300,60,200);
		context.stroke();

效果以下圖：

關於貝塞爾曲線的相關內容，能夠查閱下面的博客：

http://www.javashuo.com/article/p-ziuwrmne-gd.html。

arc函數用來建立圓形弧線，例如：

context.moveTo(110,350);
		context.arc(60,350,50,0,2*Math.PI,false);
		context.stroke();

arc函數中，前兩個個參數設置圓心點，第3個參數設置半徑，第4個和第5個參數設置圓弧的起始點和結束點，以弧度製表示，最後一個參數爲布爾值，設置是否逆向繪製。還有一個arcTo函數用來繪製兩條切線間的圓弧，以下：

context.moveTo(20,420);
		context.arcTo(80,420,80,600,50);
		context.stroke();

效果以下圖所示：

使用clip函數能夠進行裁剪操做，裁剪以後，以後的繪製只能繪製在裁剪的區域內，例如：

context.rect(0,500,100,30);
		context.clip();
		context.fillRect(0,500,200,200);

效果以下：

有一點須要注意，使用clip函數進行裁剪後，以後的繪製將只能在裁剪的區域內進行繪製，若是想在裁剪區域外繪製，須要使用save和restore兩個函數來處理，在裁剪前，使用save函數來保存當前繪圖上下文的狀態，想要在裁剪區域外繪製時使用restore函數來還原繪圖上下文。

2.繪製文本和圖像

    前面示例了使用Canvas進行圖形的繪製，除了圖形，使用Canvas也能夠輕鬆的繪製出圖像與文本。使用drawImage函數進行圖像的繪製，以下：

var image = document.createElement("img");
		image.src = 'img/HBuilder.png';
		image.onload = function(){
				context.drawImage(image,0,600);
		}

須要注意，上面建立了img元素後，設置src屬性後不能馬上進行渲染，由於圖片的加載是須要時間的，直接渲染會沒法獲取圖像數據。drawImage這個函數總共能夠有8個參數，drawImage(img,sx,sy,sw,sh,x,y,w,h)。其中sx，sy和sw，sh用來對原圖像進行裁剪，只選擇圖像中的部分進行繪製，x，y，w，h設置繪製在畫布上的座標和尺寸。

    關於文本繪製，可使用fillText或strokeText函數，分別用來繪製實心和空心文字。示例以下：

context.font = "20px Georgia";//設置字體
 		context.textAlign = 'start';  //設置文字對齊方式
		context.fillText("Hello World",0,750,200);
		context.strokeText("Hello World",0,800,200);

效果以下：

3.繪製屬性的設置

    在繪製過程當中，開發者能夠對繪製的線條顏色，填充顏色，風格，陰影等進行設置。示例以下：

context.fillStyle = 'red';  //設置填充顏色
		context.strokeStyle = 'blue'; //設置線條顏色
		context.shadowColor = 'green'; //設置陰影顏色
		context.shadowBlur = 10;   //設置陰影模糊度
		context.shadowOffsetX = 10; //設置陰影X軸偏移量
		context.shadowOffsetY = 5;  //設置陰影Y軸偏移量
		context.lineCap = 'round';  //設置線帽樣式
		context.lineJoin = 'round'; //設置折點樣式
		context.lineWidth = 1; //設置線條寬度

效果以下圖：

關於fillStyle和strokeStyle兩個屬性比較特殊，從名字也能夠了解其是設置填充或線條的風格，設置顏色只是一種方式，其還能夠設置爲一個漸變對象，用來實現漸變效果。例如：

var g = context.createLinearGradient(0,750,200,750);
		g.addColorStop(0,'black');
		g.addColorStop(0.5,'red');
		context.fillStyle =  g;
		context.fillText("Hello World",0,750,200);

效果入下圖：

createLinearGradient函數用來建立線性漸變層，其中4個參數設置起始點的x，y和結束點的x，y。調用addColorStop函數用來想漸變層中添加臨界點和顏色值。也能夠建立發散型漸變，例如：

var g = context.createRadialGradient(70,800,20,70,800,50);
		g.addColorStop(0,'black');
		g.addColorStop(1,'red');
		context.fillStyle =  g;
		context.fillRect(20,750,100,100);

效果以下：

createRadiaGradient函數的前3個參數設置漸變開始處的圓弧(分別設置圓心x，y座標和半徑)，後3個參數設置漸變結束處的圓弧(分別設置圓心x，y座標和半徑)。

    fillStyle和strokeStyle也能夠設置爲一個模式背景，例如將圖片進行重複獲得的背景，示例以下：

image.onload = function(){
			var p = context.createPattern(image,'repeat');
		    context.fillStyle =  p;
			context.fillRect(20,750,200,200);
		}

效果以下圖所示：

可選的重複模式還有：

repeat-x：只在水平方向重複。

repeat-y：只在豎直方向重複。

no-repeat：不重複，只顯示一次。

4.進行畫布轉換

    畫布也能夠進行一些簡單的變換操做，例如旋轉，縮放等等。須要注意，對畫布的操做不會影響到已經繪製到畫布上的內容，以後繪製的內容會受到影響。使用scale(x,y)函數能夠對畫布進行縮放，其中兩個參數x和y分別設置水平和豎直方向的縮放比例。rotate(angle)函數用來對畫布進行旋轉，其中的參數爲旋轉的角度值。translate(x,y)函數用來對畫布進行平移，參數x，y分別設置水平和豎直方向的平移量。還有一個複合的transform(a,b,c,d,e,f)函數，使用這個函數能夠一步設置平移，旋轉和縮放屬性，參數意義以下：

a：設置水平縮放比

b：設置水平傾斜

c：設置垂直傾斜

d：設置垂直縮放比

e：設置水平平移

f：設置垂直平移

須要注意，若是你屢次調用transform，每次的transform變換都將在上一次的基礎上進行。若是你不想保留上一次的記錄，能夠調用setTransform()函數來重置設置。