canvas

canvas定義

是 HTML5 新增的元素，可用於通過使用JavaScript中的腳本來繪製圖形
例如，它可以用於繪製圖形，創建動畫。 最早由Apple引入WebKit
渲染上下文
元素只是創造了一個固定大小的畫布，要想在它上面去繪製內容，
我們需要找到它的渲染上下文
元素有一個叫做 getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。
getContext()只有一個參數，上下文的格式
----->獲取方式
var canvas = document.getElementById(‘box’);
var ctx = canvas.getContext(‘2d’);

		----->檢查支持性
			  var canvas = document.getElementById('tutorial');
			  if (canvas.getContext){
					var ctx = canvas.getContext('2d');
				} 

畫布高寬的問題
畫布默認高寬300*150
切記一定要使用html的attribute的形式來定義畫布的寬高
通過css形式定義會縮放畫布內的圖像

繪製圖形

HTML中的元素canvas只支持一種原生的圖形繪製：矩形。所有其他的圖形的繪製都至少需要生成一條路徑
1.繪製矩形
canvas提供了三種方法繪製矩形：
---->繪製一個填充的矩形（填充色默認爲黑色）
fillRect(x, y, width, height)
---->繪製一個矩形的邊框（默認邊框爲:一像素實心黑色）
strokeRect(x, y, width, height)
---->清除指定矩形區域，讓清除部分完全透明。
clearRect(x, y, width, height)

2.添加樣式和顏色
fillStyle :設置圖形的填充顏色。
strokeStyle :設置圖形輪廓的顏色。
默認情況下，線條和填充顏色都是黑色（CSS 顏色值 #000000）
lineWidth : 這個屬性設置當前繪線的粗細。屬性值必須爲正數。
描述線段寬度的數字。 0、 負數、 Infinity 和 NaN 會被忽略。
默認值是1.0。

4.lineWidth & 覆蓋渲染

5.lineJoin 設定線條與線條間接合處的樣式（默認是 miter） round : 圓角 bevel : 斜角 miter : 直角

###繪製三角形
beginPath()
新建一條路徑，生成之後，圖形繪製命令被指向到路徑上準備生成路徑。
moveTo(x, y)
將筆觸移動到指定的座標x以及y上
lineTo(x, y)
將筆觸移動到指定的座標x以及y上
繪製一條從當前位置到指定x以及y位置的直線
closePath()
閉合路徑之後圖形繪製命令又重新指向到上下文中。
stroke()
通過線條來繪製圖形輪廓。
不會自動調用closePath()
fill()
通過填充路徑的內容區域生成實心的圖形。
自動調用closePath()

canvas繪製圓形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）爲圓心的以radius爲半徑的圓弧（圓），從startAngle開始到endAngle結束，
按照anticlockwise給定的方向（默認爲順時針）來生成。

arcTo(x1, y1, x2, y2, radius)
根據給定的控制點和半徑畫一段圓弧
肯定會從(x1 y1) 但不一定經過(x2 y2);(x2 y2)只是控制一個方向

canvas中的變換

translate(x, y)
我們先介紹 translate 方法，它用來移動 canvas的原點到一個不同的位置。
translate 方法接受兩個參數。x 是左右偏移量，y 是上下偏移量，

	在canvas中translate是累加的

rotate(angle)
這個方法只接受一個參數：旋轉的角度(angle)，它是順時針方向的，以弧度爲單位的值。
旋轉的中心點始終是 canvas 的原點，如果要改變它，我們需要用到 translate 方法

	在canvas中rotate是累加的

scale(x, y)
scale 方法接受兩個參數。x,y 分別是橫軸和縱軸的縮放因子，它們都必須是正值。
值比 1.0 小表示縮小，比 1.0 大則表示放大，值爲 1.0 時什麼效果都沒有。
縮放一般我們用它來增減圖形在 canvas 中的像素數目，對形狀，位圖進行縮小或者放大。

	在canvas中scale是累稱的

使用圖片

1.canvas操作圖片時，必須要等圖片加載完才能操作
2.drawImage(image, x, y, width, height)
其中 image 是 image 或者 canvas 對象，x 和 y 是其在目標 canvas 裏的起始座標。
這個方法多了2個參數：width 和 height，這兩個參數用來控制 當像canvas畫入時應該縮放的大小

繪製文本

fillText(text, x, y)
在指定的(x,y)位置填充指定的文本
strokeText(text, x, y)
在指定的(x,y)位置繪製文本邊框
canvas中文本水平垂直居中

				ctx.font= "30px sans-serif"
                ctx.textBaseline = "middle"
                var w = ctx.measureText("kobe").width
                ctx.fillText("kobe",(canvas.width-w)/2,(canvas.height-60)/2)

像素操作

getImageData():獲得一個包含畫布場景像素數據的ImageData對像,它代表了畫布區域的對象數據

ImageData對象中存儲着canvas對象真實的像素數據，它包含以下幾個只讀屬性：
width:圖片寬度，單位是像素
height:圖片高度，單位是像素
data:Uint8ClampedArray類型的一維數組，
包含着RGBA格式的整型數據，範圍在0至255之間（包括255）
R:0 --> 255(黑色到白色)
G:0 --> 255(黑色到白色)
B:0 --> 255(黑色到白色)
A:0 --> 255(透明到不透明)

createImageData(width, height);

覆蓋合成

source:新的圖像(源)
destination:已經繪製過的圖形(目標)

globalCompositeOperation
source-over(默認值):源在上面,新的圖像層級比較高
source-in :只留下源與目標的重疊部分(源的那一部分)
source-out :只留下源超過目標的部分
source-atop:砍掉源溢出的部分

destination-over:目標在上面,舊的圖像層級比較高
destination-in:只留下源與目標的重疊部分(目標的那一部分)
destination-out:只留下目標超過源的部分
destination-atop:砍掉目標溢出的部分

畫布的4個API

oc.getContext(“2d”):獲取畫布的2d上下文
oc.width:畫布在橫向上css像素的個數
oc.height:畫布在縱向上css像素的個數
oc.toDataUrl():拿到畫布的圖片地址