canvas介紹和用途
canvas（畫布）主要是位圖 svg（矢量圖）
canvas標簽，必須要寫的3個屬性 id width height
為什么不在style中設置width和height呢？
因為這設置width和height話會有位移差；
位移差：在畫布里面的元素有偏差；
js中每次使用canvas，都要設置一個繪圖環境，然后會得到一個對象，然后對其進行操作；
var c=document.getElementById("") canvas標簽的id值；
var d=c.getContext("2d") 設置繪圖屬性；
然后得到d這個對象，就可以對其進行操作元素里面的屬性和方法；
方法和屬性(帶()的是方法，不帶的是屬性)：
fillRect()：繪制一個填充方塊，默認顏色是黑色； 參數：x,y,w,h (坐標和寬高)
fillStyle：填充顏色 屬性值：想要的顏色；
strokeRect()：繪制邊框的方框； （如果繪制邊框的話，會有2px的偏差，所以設置坐標的話需要在原有的基礎上加上0.5），參數同fillRect()
lineWidth：邊框粗細；
strokeStyle：線條顏色；
lineJoin：邊框圓角 屬性值：round 圓，
lineCap：線條圓角；
繪制線條
moveTo()：繪制線段的起點 參數 x,y 坐標位置；
lineTo()：繪制線段的領點 參數 x,y 坐標位置 ； （最后一個lineTo就代表終點）
線條只能有一個moveTo()，但卻可以有很多lineTo()
stroke() 繪制線段；
beginPath 開始路徑 必須要寫對應的關閉路徑
closePath 關閉路徑
兩者同時出現，將繪制路徑閉合，起始點和結尾點，首尾相連；
rect() 繪制方塊，及不帶填充色和線框；
fill() 填充顏色；
clearRect(x,y,width,height) 清除矩形區域
save() restore() 這兩個方法成對出現，中間的屬性樣式，之影響內部，不影響外部；
畫圓：
arc()：參數（x,y,半徑，開始弧度，結束弧度，時針方向）；
x,y坐標 半徑，圓的大小， 開始弧度，一般都是0，結束弧度，一般都是 (0-360)*Math.PI/180， 時針方向，true 逆時針，false 順時針
translate() 平移，畫布大小位置不變，起始坐標變了 參數 x,y
旋轉：rotate() 同translate原理；
需注意一點，需要先通過 translate() 確定起始坐標點，在來操作rotate會比較好
縮放：scale(0.5，0.5) 畫布縮放，就是將畫布向后移動，跟人的視距就遠了，近大遠小；
畫布中插入圖片；drawImage()
var img=new Image()
img.src="圖片路徑"
img.onload=function(){
d.drawImage(img,x,y,w,h) d就是畫布對象，img圖片對象，坐標寬高，drawImage()在畫布中插入圖片
}
插入文字：
strokeText() 插入的文字帶邊框 參數: "輸入的內容" , x , y (坐標)
fillText() 不帶邊框 參數同strokeText()
textAlign：相對字體的起始點，水平居中
textBaseline：移到字體的起始點，垂直居中
font：字體大小和字形