canvas

canvas簡介

HTML5 標籤用於繪製圖像（通過腳本，通常是 JavaScript）。

不過， 元素本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任

注：IE8及以下版本都不支持

canvas入門使用

HTML

<canvas id="myCanvas" width="200" height="100"></canvas>
創建一個固定寬高的畫布

JavaScript

<script type="text/javascript">
var c=document.getElementById("myCanvas");		//1、獲取畫布標籤元素對象 (必須)
var cxt=c.getContext("2d");			            //2、創建2d畫筆 (必須)
cxt.fillStyle="#FF0000";		                //3、設置圖形填充色（默認黑色）
cxt.fillRect(0,0,150,75);	                    //4、繪製特定頂點的矩形
</script>

注：上面繪製矩形的方法所設置參數爲頂點座標，參考點爲畫布的左上角頂點

canvasAPI

屬性方法簡介參考 W3C

注意點

	---canvas圖像的渲染有別於html圖像的渲染，
			canvas的渲染極快，不會出現代碼覆蓋後延遲渲染的問題
			寫canvas代碼一定要具有同步思想
	---在獲取上下文時，一定要先判斷
	---畫布高寬的問題
		畫布默認高寬300*150
		切記一定要使用html的attribute的形式來定義畫布的寬高
		通過css形式定義會縮放畫布內的圖像
	---繪製矩形的問題
		a.邊框寬度的問題，邊框寬度是在偏移量上下分別渲染一半，可能會出現小數邊框，
			一旦出現小數邊框都會向上取整
		b.canvas的api只支持一種圖像的直接渲染：矩形
	---我們沒法使用選擇器來選到canvas中的圖像

畫布api

	oc.getContext("2d");	//獲取畫筆
	oc.width			        	//設置畫布寬度
	oc.height	                    //設置畫布高度

上下文api

	ctx.fillRect(x,y,w,h):填充矩形
	ctx.strokeRect(x,ymwmh):帶邊框的矩形
	ctx.clearRect(0,0,oc.width,oc.height):清除整個畫布
		注意原點的位置
	ctx.fillStyle
	ctx.strokeStyle
	ctx.lineWidth
	ctx.lineCap
	ctx.lineJoin
	ctx.moveTo(x,y):將畫筆擡起點到x，y處
	ctx.lineTo(x,y):將畫筆移到x，y處
	ctx.rect(x,y,w,h)
	ctx.arc(x,y,r,degS,degE,dir)
	ctx.arcTo(x1,y1,x2,y2,r):2個座標，一個半徑
			結合moveTo(x,y)方法使用，
			x,y:起始點
			x1,y1：控制點
			x2,y2：結束點
	ctx.quadraticCurveTo(x1,y1,x2,y2)
			結合moveTo(x,y)方法使用，
			x,y:起始點
			x1,y1：控制點
			x2,y2：結束點
			必須經過起點和終點
	ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
			結合moveTo(x,y)方法使用，
			x,y:起始點
			x1,y1：控制點
			x2,y2：控制點
			x3，y3：結束點
			必須經過起點和終點
	ctx.fill()
	ctx.stroke()
	
	ctx.beginpath():清除路徑容器
	ctx.closepath():閉合路徑
		fill自動閉合
		stroke需要手動閉合
	ctx.save()
		將畫布當前狀態(樣式相關 變換相關)壓入到樣式棧中
	ctx.restore()
		將樣式棧中棧頂的元素彈到樣式容器中
		圖像最終渲染依賴於樣式容器
		
	ctx.translate(x,y):將原點按當前座標軸位移x，y個單位
	ctx.rotate(弧度):將座標軸按順時針方向進行旋轉
	ctx.scale(因子):
		放大：放大畫布，畫布中的一個css像素所佔據的物理面積變大，畫布中包含的css像素的個數變少
				畫布中圖像所包含的css像素的個數不變
		縮小：縮小畫布，畫布中的一個css像素所佔據的物理面積變小，畫布中包含的css像素的個數變多
				畫布中圖像所包含的css像素的個數不變

save() 與 restore()、beginPath()
以上三個方法稱爲canvas畫圖三件套