HTML5 canvas 畫布

canvas 與 svg

HTML 5 canvas 與 svg 都是畫布，用用於繪製圖像，HTML 5 canvas
是新增的屬性，而svg歷史比canvas久遠，起源於xml；兩者雖然都是用於繪製圖像，但是兩者卻有着很大的區別；
svg 是矢量圖，矢量圖的特性的不會失真，所以一般用於繪製地圖； canvas 是位圖，位圖是通過像素點來繪製圖像，一般用於遊戲界面的繪製。

canvas 能夠做什麼？

當然我們這片文章主要講解一下canvas裏一些常用的API。提起畫圖，那肯定就離不開畫寫矩形，圓形，線條，文字呀等等；

創建一塊小畫布（canvas）

既然畫圖，我們肯定需要找到一個可以畫圖的小畫布，所以我們需要創建一塊小畫布，我們創建了一塊寬高都爲500的小畫布，當然此時他就是一塊小白塊，所以我們需要給他一些樣式讓我們更加直觀的看見他。

<canvas id="mycanvas" width="500" height="500px" style="border: 1px solid"></canvas>

創建畫筆（getContext(‘2d’)）

畫布創建完成後，那麼問題來了，我們怎麼樣纔可以畫圖呢？在小黑板上畫圖還需要一直粉筆，在畫布上我們也需要一直畫筆，此時我們需要獲取這隻畫筆。

var mycanvas = document.getElementById('mycanvas');
var cxt = mycanvas.getContext('2d');

繪製矩形（fillRect(x,y,width,height)）

當我們創建了一隻畫筆後，就可以開始繪製一些簡單的圖形，我們先來畫一個座標爲（100，100），寬高爲100的矩形看看效果。

cxt.fillRect(100,100,100,100);

填充樣式（fillStyle）

此時是一個黑色填充的正方形，如果只是黑白圖像，那麼這個圖像肯定就是不好看的，那麼我們再來創建一個不同顏色的矩形。

cxt.fillStyle = 'blue';

繪製圓形（arc(x,y,r,start,stop,bool)）

圓形也是不可缺少的一種常見的圖片，畫圖少了他怎麼能夠行，讓我們一起來看看效果。

cxt.fillStyle = 'red';
cxt.arc(0,0,100,0,Math.PI)
cxt.fill();

我們可能會要疑問，爲什麼一個圓卻只顯示了四分之一呢？
我們都知道圓有自己的座標，半徑，如上圖我們就知道，原來我們的座標點在（0,0），所以只顯示出了四分之一，我們把圓給位置調整看一下

那爲什麼調整了位置後，卻只顯示了二分之一的圓呢？
我們在數學中學過的弧度，π是180度，而在JavaScript中π是Math.PI，那麼我們就是Math.PI是180度，也就是一個半圓，由此我們就可以嘗試畫出四分之一的圓，半圓，四分之三的圓和整圓。

cxt.fillStyle = 'red';
// 四分之一的圓
cxt.arc(60,200,50,0,Math.PI * 0.5)
cxt.fill();
//半圓
cxt.arc(180,200,50,0,Math.PI * 1)
cxt.fill();
//四分之三的圓
cxt.arc(310,200,50,0,Math.PI * 1.5)
cxt.fill();
//整圓
cxt.arc(430,200,50,0,Math.PI * 2)
cxt.fill();

我們看效果，於是很奇怪，我什麼不是我想要的效果呢？而是成爲了四個有着圓的弧度，但是不是四個弧形的不規則圖形呢？

空心填充 （stroke()）

fill()是實心填充，這樣我們不好看效果，我們把它給轉化成不填充的樣式，來分析他們的路徑。

cxt.strokeStyle = 'red';
cxt.arc(60,200,50,0,Math.PI * 0.5)
cxt.stroke();
cxt.arc(180,200,50,0,Math.PI * 1)
cxt.stroke();
cxt.arc(310,200,50,0,Math.PI * 1.5)
cxt.stroke();
cxt.arc(430,200,50,0,Math.PI * 2)
cxt.stroke();

開始路徑（beginPath()）& 結束路徑（closePath()）

變成線條後我們可以清楚直觀的看見路徑的走向，原來我們上次繪製的弧形的終點與我們下一次繪製的起點也自動的鏈接起來了，那麼我們設置起點和終點開看一看。

cxt.strokeStyle = 'red';
// 四分之一的圓
cxt.beginPath()
cxt.arc(60,200,50,0,Math.PI * 0.5)
cxt.stroke();
cxt.closePath()
//半圓
cxt.beginPath()
cxt.arc(180,200,50,0,Math.PI * 1)
cxt.stroke();
cxt.closePath()
//四分之三的圓
cxt.beginPath()
cxt.arc(310,200,50,0,Math.PI * 1.5)
cxt.stroke();
cxt.closePath()
//整圓
cxt.beginPath()
cxt.arc(430,200,50,0,Math.PI * 2)
cxt.stroke();
cxt.closePath()

實心填充（fill()）

調整好了起點到終點，我們來看一下實心填充之後的狀態。

cxt.fillStyle = 'red';
//四分之一的圓
cxt.beginPath()
cxt.arc(60,200,50,0,Math.PI * 0.5)
cxt.fill();
cxt.closePath()
//半圓
cxt.beginPath()
cxt.arc(180,200,50,0,Math.PI * 1)
cxt.fill();
cxt.closePath()
//四分之三的圓
cxt.beginPath()
cxt.arc(310,200,50,0,Math.PI * 1.5)
cxt.fill();
cxt.closePath()
//整圓
cxt.beginPath()
cxt.arc(430,200,50,0,Math.PI * 2)
cxt.fill();
cxt.closePath()

創建起點（moveTo()）

造成這個的原因是因爲開始路徑到截止路徑，canvas默認會鏈接起來，只不過我們看不見，所以我們從圓心創建起點，然後空心填充看一下效果

cxt.strokeStyle = 'red';
//四份之一的圓
cxt.beginPath()
cxt.moveTo(60,200)
cxt.arc(60,200,50,0,Math.PI * 0.5)
cxt.stroke();
cxt.closePath()
//半圓
cxt.beginPath()
cxt.moveTo(180,200)
cxt.arc(180,200,50,0,Math.PI * 1)
cxt.stroke();
cxt.closePath()
//四分之三的圓
cxt.beginPath()
cxt.moveTo(310,200)
cxt.arc(310,200,50,0,Math.PI * 1.5)
cxt.stroke();
cxt.closePath()
//整圓
cxt.beginPath()
cxt.moveTo(430,200)
cxt.arc(430,200,50,0,Math.PI * 2)
cxt.stroke();
cxt.closePath()

創建轉折點（lineTo()）

此時我們以圓心爲起點連接到圓的起點，我們需要將圓的終點在連接至圓心將弧形給閉合起來（此時這裏默認會鏈接起來，做實心填充無需這一步），一起來看一下效果。

cxt.strokeStyle = 'red';
//四份之一的圓
cxt.beginPath()
cxt.moveTo(60,200)
cxt.arc(60,200,50,0,Math.PI * 0.5)
cxt.lineTo(60,200)
cxt.stroke();
cxt.closePath()
//半圓
cxt.beginPath()
cxt.moveTo(180,200)
cxt.arc(180,200,50,0,Math.PI * 1)
cxt.lineTo(180,200)
cxt.stroke();
cxt.closePath()
//四分之三的圓
cxt.beginPath()
cxt.moveTo(310,200)
cxt.arc(310,200,50,0,Math.PI * 1.5)
cxt.lineTo(310,200)
cxt.stroke();
cxt.closePath()
//整圓
cxt.beginPath()
cxt.moveTo(430,200)
cxt.arc(430,200,50,0,Math.PI * 2)
cxt.lineTo(430,200)
cxt.stroke();
cxt.closePath()

創建文本（fillText()）

在畫圖工具中，創建文本是不可缺少的一部分，比如說給圖片添加水印等等，我們給畫布添加一段文字，看看效果

cxt.fillText('Hello World',0,0);

文本基線（textBaseline）

我們會很奇怪的發現我們在填充的文字竟然在canvas中沒有顯示出來，原來文字有自己的文本基線，我們只需要設置一下文本的基線就可以了，

值	描述
alphabetic	默認。文本基線是普通的字母基線。
top	文本基線是 em 方框的頂端。
hanging	文本基線是懸掛基線。
middle	文本基線是 em 方框的正中。
ideographic	文本基線是表意基線。
bottom	文本基線是 em 方框的底端。

cxt.textBaseline = 'top'
cxt.fillText('Hello World',0,0)

字體樣式（font）

一看這個文本，好像有點小，字體也不太好看，我們來設置一下字體的樣式

cxt.font = '24px 宋體'
cxt.textBaseline = 'top'
cxt.fillText('Hello World',250,0)

對齊方式（textAlign）

奇怪的是我們字體的位置調整在中間，文本卻整體靠右，設置一下文本的對齊方式

值	描述
start	默認。文本在指定的位置開始。
end	文本在指定的位置結束。
center	文本的中心被放置在指定的位置。
left	文本在指定的位置開始。
right	文本在指定的位置結束。

cxt.textBaseline = 'top'
cxt.textAlign = 'center'
cxt.fillText('Hello World',250,0)

旋轉（rotate()）

模仿那些水印的生成，我們將字體旋轉45°。

cxt.textBaseline = 'middle'
cxt.textAlign = 'center'
cxt.rotate(45*Math.PI/180)
cxt.fillText('Hello World',250,250)

修改圓心（translate(x,y)）

納尼？爲什麼會在這個角落裏，原來是旋轉的時候我們的圓心在（0,0）的位置，我們來修改一下將圓心修改至中間再來旋轉。

cxt.translate(250,250)
cxt.rotate(45*Math.PI/180)
cxt.fillText('Hello World',250,250)

不見了，爲什麼呢？原來我們繪圖本來是以（0,0）作爲相對左邊繪製的，此時我們將座標改至（250,250）；在以（250,250）的座標繪製距離座標（250,250）的文本，就是在（500,500）處，超出畫布的界限，自然而然的就顯示不了啦。我們更改一下座標。

cxt.translate(250,250)
cxt.rotate(45*Math.PI/180)
cxt.fillText('Hello World',0,0)

當畫布設置旋轉之後，我們在繼續繪製其他路徑時也是旋轉的狀態，再次設置旋轉是我們的旋轉的角度是當前旋轉的元素在繼續旋轉，是一個累加的過程。

		cxt.translate(250,250)
		cxt.rotate(45*Math.PI/180)
		cxt.fillText('Hello World',0,0)
		cxt.rotate(45*Math.PI/180)
		cxt.fillText('Hello World',100,100)

保存當前環境（save()）&還原當前環境（restore()）

那麼我們每次旋轉完成後，我們將旋轉的角度在旋轉回去，就不會出現這樣的問題，但是這樣感覺也太麻煩了吧，我們每次旋轉之前保存當前環境，在旋轉完成後在返回當前環境。

cxt.translate(250,250)
cxt.save();
cxt.rotate(45*Math.PI/180)
cxt.fillText('Hello World',0,0)
cxt.restore();
cxt.rotate(45*Math.PI/180)
cxt.fillText('Hello World',100,100)

常用的shadow屬性

//陰影的模糊級別
cxt.shadowBlur = 10;
//陰影的顏色
cxt.shadowColor = 'red'
//陰影距離文本的距離
cxt.shadowOffsetX = 10;
cxt.shadowOffsetY = 10;