? ? ? ? Canvas ?基礎篇
1.它是H5新的API ?
?什么是API ？ ? 答：接口 ? 廣義上的意義 ??
2.canvas 簡介 ?什么是canvas？
canvas是一個html標簽， 但是給js提供接口，通過JS代碼可以在canvas元素上畫圖
canvas可以應用在 游戲 炫酷的一些效果 ，banner，報表，可視化的數據 ，地圖 ，圖形編輯器 ， 模擬器?
3.canvas 屬性 （width ，height）
4.方法 ?getContext（） 獲取繪圖環境 參數 2d，webgl ? ? ? ***var cxt =canvas.getContext（'2d'）;?
坐標 X坐標 Y 坐標 ? ? 原點 左上角
5.Canvas基本繪畫?
-? 路徑開始和閉合?
- ?beginPath（）開啟新的路徑(狀態) 并且結束前面的路徑
-? closePath() 結束當前路徑 并且使當前路徑閉合
--- 線
- moveTo（x，y）起始點坐標?
- lineTo （x,y）繪制直線（接著上一個點）
6.快速矩形工具?
* rect(x, y, w, h)? ? 繪制矩形的路徑
* strokeRect(x,y,w,h)? 繪制描邊的矩形
* fillStyle(x,y,w,h) 繪制的填充的矩形
* clearRect(x,y,w,h)? 清除矩形（繪制的矩形區域內的內容將被擦除）
7.畫圓（?。?/p>
arc(x,y,r,start, end, true/false)
cxt.arc(300,250,150,0,Math.PI*2);?
最后一個參數是表示 順時針(false)還是逆時針(true) 默認false ??
8.文字
*font? 屬性 設置大小和字體
*textAlign 屬性 文字的水平對齊方式? start(默 ? ? ? ? ?認)/end/left/right/center
?*textBaseLine 屬性 文字的垂直對齊方式 ? ? ? ? ? ? ? ? ?alphabetic(默認)/top/bottom/middle
* fillText(text, x, y) 填充文字
*strokeText（text，x，y）描邊文字
*measureText（text）返回該文本在畫布中所占的寬度
9.描邊
*stroke()? ? 填充當前路徑
*strokeStyle? 屬性? 設置描邊顏色
*lineWidth? 屬性? 設置描邊線條寬度
10.填充
* fill()? 填充當前的路徑
* fillStyle? 屬性? 設置填充的顏色
* 注意： 非0環繞的算法
“非零環繞規則”是這么來判斷有自我交叉情況的路徑的：對于路徑中的任意給定區域，從該區域內部畫一條足夠長的線段，
使此線段的終點完全落在路徑范圍之外。
11.瀏覽器不兼容處理
注：ie9以上才支持canvas,其他chrome、ff、蘋果瀏覽器等都支持
·只要瀏覽器兼容canvas，那么就會支持絕大部分api(個別最新api除外)
·移動端的兼容情況非常理想，基本上隨便使用
·2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
·如果瀏覽器不兼容，最好進行友好提示請參照下方寫法進行提示
（畫一個直角三角形）
//獲取canvas 元素（畫布）
在body中寫一個<canvas id=‘mycanvas’>您的野生瀏覽器該換了</canvas>
var canvas = document.querySelector("#mycanvas");
//設置畫布大小
canvas.width = 600;
canvas.height = 500;
canvas.style.border = "1px solid #ccc";
//獲取繪圖環境
var cxt = canvas.getContext("2d");
//繪制
cxt.beginPath();
cxt.moveTo(100,100);
cxt.lineTo(400,100);
cxt.lineTo(400,400);
cxt.lineTo(300,300);
cxt.closePath();
//描邊
cxt.lineWidth = 20;
cxt.stroke();
//填充
cxt.fillStyle = "red";
cxt.fill();
12.清除畫布
* 使用 clearRect()
* 重新設置 canvas的寬度 ?canvas.width=canvas.width
