lineTo(x,y) 定義線條結束坐標
moveTo(x,y) 定義線條開始坐標
ctx.stroke();繪制空心圖形
canvas標簽的有效屬性。ctx.fill();填充圖形 把當前路徑環繞起來的區域進行填充
ctx.fillStyle 填充顏色
ctx.strokeStyle 繪制圖形顏色
ctx.closePath();//讓圖形閉合，防止鋸齒
canvas的方法有哪些。?ctx.beginPath();//?// 一個畫布內畫多個圖形，放了防止重繪之前的路徑，所以先把之前的路徑清除掉
?
非零環繞原則：
a 是用來判斷哪些區域屬于路徑內( 計算結果非0，即為路徑內 )。
canvas標簽的屬性？b 在路徑包圍的區域中，隨便找一點，向外發射一條射線，
c 和所有圍繞它的邊相交，
d 然后開啟一個計數器，從0計數，
e 如果這個射線遇到順時針圍繞，那么+1，
f 如果遇到逆時針圍繞，那么-1，
g 如果最終值非0，則這塊區域在路徑內。
備注：基數邊的區域一定在路徑內。
先填充與先描邊?
描邊的時候會占用原圖形的一部分(線寬的一半)
為了讓線寬符合要求，最好先填充再描邊，防止填充時覆蓋掉線寬的一半
csscanvas如何使用？? ctx.fill();?? ctx.stroke();
?
canvas在繪制線條的時候，會向左或向右偏移線寬的一半，然后進行繪制
如果線寬為奇數，邊緣顏色會變淺
html中canvas什么用。?
設置線帽樣式:
ctx.lineCap='butt'、'round'、'square'
butt是默認值
js創建canvas，round線頭是圓的
square線頭兩段各增加線寬的一半
?
設置交點樣式
html5canvas輸出？ctx.lineJoin = ‘miter' 、'round'、'bevel'
miter是默認值，兩邊向外延伸相交為尖尖角，
round是圓頭，
bevel兩邊相連為一個斜面。
?
內置矩形的API
canvas的有效屬性。ctx.rect(起點x，起點y，寬，高)
繪制一個描邊矩形
ctx.strokeRect(起點x，起點y，寬，高);
繪制一個填充矩形
ctx.fillRect(起點x，起點y，寬，高);
按照矩形的大小清除畫布中指定位置的內容
標簽canvas使用、ctx.clearRect(起點x，起點y，寬，高);
?
繪制虛線
ctx.setLineDash([5,3]);設置畫線的時候空白部分和實現部分的大小 5像素實線，3像素空白
?
畫弧( 畫的是路徑 )?
canvas css。ctx.arc( 圓心x軸坐標，圓心y軸坐標，半徑, 起點弧度，結束點弧度，是否逆時針畫(可選) )
?
設置文字的屬性
?ctx.font = 和css語法一樣。
?注意：這里設置字體大小時必須帶單位，單位支持css的所有表示方式。
注意：單獨設置字體大小不會生效，必須要加一個額外屬性樣式。
? ctx.font = '2rem 微軟雅黑';
?繪制描邊文字：
?ctx.strokeText( 文字, 參考x軸坐標，參考y軸坐標，限制文字的最大長度(可選) )
ctx.strokeText( '嘻嘻嘻嘻嘻嘻', 100, 100 );
繪制填充文字：
ctx.fillText( 文字, 參考x軸坐標，參考y軸坐標，限制文字的最大長度(可選) )
ctx.fillText( '咯咯咯咯咯咯', 100, 200 );
設置文字的水平對其方式：
ctx.textAlign = 'left || start' 、 'right || end' 、 'center'
默認值為start。
設置文字的垂直對其方式：
ctx.textBaseline = 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
默認值為alphabetic。
?
狀態保存：
ctx.save();
?把當前的狀態(繪制環境的所有屬性)copy一份進行保存。
?
狀態回滾：
ctx.restore();
把最近保存的一次狀態作為當前狀態。
?
ctx.drawImage()
繪制圖像，有三種使用方式。
第一種，三參數版本：
把圖像繪制到指定的坐標。
必須要在img圖像下載完畢之后使用
img.onload = function() {
ctx.drawImage( img, 10, 10 );
}
第二種，五參數版本：
把圖像繪制到指定的坐標，并指定其大小。
必須要在img圖像下載完畢之后使用
img.onload = function() {
ctx.drawImage( img, 10, 10, 200, 200 );
}
第三種，九參數版本：
把裁剪到的部分圖像繪制到指定的坐標，并指定其大小。
必須要在img圖像下載完畢之后使用
img.onload = function() {
ctx.drawImage( img,
0, 0, 400, 400,
100, 100, 400, 400 );
}
ctx.isPointInPath()判斷點是否在路徑內（路徑必須繪制出來才可以
比如this.ctx.rect()；然后必須this.ctx.stroke()才可以
）
requestAnimationFrame
?請求動畫幀函數，這個函數和setTimeout方法使用類似，
?他都是定時器，卻別在于setTimeout可以自由指定回調的觸發時間，
?而requestAnimationFrame函數回調的觸發是由瀏覽器來控制的。
?requestAnimationFrame( callback )
?備注：當瀏覽器重繪頁面的時候，就會調用這個callback，
?這樣callbackg的執行就會比較穩定，適合用來做流暢的動畫。
用法:
(function con() {
console.log(111);
requestAnimationFrame( con );
}());
?
