canvas基礎用法
canvas 是 HTML5 提供的一個用於展示繪圖效果的標簽. canvas 原意畫布, 帆布. 在 HTML 頁面中用於展示繪圖效果. 最早 canvas 是蘋果提出的一個方案, 今天已經在大多數瀏覽器中實現.
非零環繞原則:
如果需要判斷某一個區域是否需要填充顏色. 就從該區域中隨機的選取一個點.
從這個點拉一條直線出來, 一定要拉到圖形的外面. 此時以該點為圓心.
看穿過拉出的直線的線段. 如果是順時針方向就記為 +1, 如果是 逆時針方向,
就記為 -1. 最終看求和的結果. 如果是 0 就不填充. 如果是 非零 就填充.
首先給 canvas設置寬高不能再樣式表裏設置，只能在行內中設置，這樣就不會失真，默認寬高是300,150
ctx.moveTo :（x , y）: 將繪制的起始點設置為x ,y
ctx.lineTo : （x , y）:從當前位置
ctx.stroke（）：描邊繪圖，將坐標點連起來；
ctx.fill（）：調用fill方法會將所有的點連接起來，並構成一個封閉的圖形結構，如果所有的描點沒有構成封閉結構，也會將開始的起點，與最終的點連接起來，構成一個閉合 的圖形，並填充顏色，默認黑色；
ctx.beginPath（）：開啟新路徑；
closePath( )：閉合路徑；
ctx.strokeStyle= : 設置邊框顏色；
ctx.fillStyle=：設置填充顏色；
ctx.lineWidth=：設置線寬；
ctx.lineCap=：設置線 末端 以什麽類型結束； butt（兩端使用方形結束） round（兩端末端添加圓形線帽） square （兩端末端添加正方形線帽）
ctx . lineJoin=：設置相交線的拐點； ‘round‘ 使用圓角連接. bevel‘ 使用平切連接. ‘miter‘ 使用直角轉.
虛線：
lineDashOffset = : 用於設置開始繪制虛線的偏移量. 數字的正負表示左右偏移；
getLineDash( ) ：獲取實虛線數組；
setLineDash([ 5, 5 ] ) : 設置實線長度為5，虛線長度為5；
繪制矩形：
Ctx . rect ( x , y , width , height ) : 只是描邊，必須要配合stroke（）/ fill( ) 使用；
Ctx . strokeRect （x , y , width , height） : 直接繪制正方形；
Ctx . fillRect （x , y , width , height） ： 繪制正方形並且填充默認黑色；
Ctx . clearRect（x , y , width , height）： 清除繪制的矩形；
清除畫布：
Ctx . clearRect ( 0 , 0 , cas . width , cas . height ) ：從畫布圓點開始，以畫布的高和寬進行清除；
Cas . width = cas . width ： 重新設置畫布的寬，相當於畫布被刷新了一次，也就被清空；
圓弧：
ctx . arc（x , y , r , startAngle . endAngle , anticlockwise） 6個參數，前五必填；
x , y 是圓心坐標；
radius 表示圓弧半徑, 單位為弧度；
startAngle 與 endAngle 表示開始到結束的角度，從 x 正軸為 0°, 順時針為正方向 .
anticlockwise （方向正反）：表示是否采用默認的正向角度, 如果傳入 true 表示逆指針為正 . 該參數可選.
弧度制：
為了更好的計算角度，我們把角度提供一個新的定義，用 PI （π）作為單位，將單位圓的一個整圈（360度）記作 2 倍的 PI；
這樣的度量表示就是弧度制的表示方法；
angel 角度；
radian 弧度 ；
角度轉換為弧度：
弧度 = 角度 / 180 * π π =180度 弧度 = 60度 / 180度 * π ；
弧度轉換為角度 ：
角度 = 弧度 * 180 / π 角度 =（π / 3） * 180 / π ；
計算圓弧上的點的坐標：
x = x0 + r * Math . cos（a）; x0為圓心x
y = y0 + r * Math . sin（a）; y0為圓心y
繪制文本：
Ctx . fillText ( " 文字內容 "，x , y ) : 實心文字； x，y為文本的起始點坐標，但是是以文字的左下角為起始點坐標；
Ctx . strokeText （“ 文本內容 ”, x , y）: 描邊文字，鏤空的文字； x，y為文本的起始點坐標，但是是以文字的左下角為起始點坐標；
Ctx . font（）：設置繪制字體的各種信息， 與 CSS 語法一致 , 設置字體形狀 , 樣式 , 字號粗細等 style | variant | weight | size/line-height | family.
文字對齊屬性：
ctx . textAlign = : 水平對齊； left( 默認start ) / right（end） / center ; 以左下角的點為豎線，水平向左 / 右 / 中間對齊；
Ctx . textBaseline = : 垂直對齊； bottom（默認） / middle（英文四條線上的第二條線） / top（懸掛在基線下） ; 以左下角的點為橫線， 垂直向上 / 中 / 下對齊；
/alphabetic 表示字母參考線, ideographic 會比它低一點, hanging 表示懸掛. [ 對齊方式：可不記 ]
繪制圖片：
[ 繪制圖片要等待圖片獲取到了之後再繪制，img.onload=function( ) { ctx.drawImage ( img, x , y ) } ]
ctx . drawImage ( img, x , y ) : 將圖片繪制到x, y表示的位置去；
ctx . drawImage ( img, x , y, width , height ) : 將圖片繪制到指定的矩形裏去；
Ctx . drawImage ( img , sx , sy , sWidth , sHeight , dx , dy , dWidth , dHeight )：
這裏的帶有 s 前綴的參數就是指圖源的矩形區域，將圖片的 ( 100, 100, 300, 200 ) 處的內容繪制到頁面的 ( 100, 100, 300, 200 ) 的位置.
變換：
Ctx . scale ( ) : 該方法實現水平與垂直的縮放.
參數 x 控制水平縮放倍率. 傳參 1 表示不作縮放, 傳入大於 1 的數字表示擴大.
參數 y 控制垂直縮放倍率. 傳參 1 表示不作縮放, 傳入大於 1 的數字表示擴大;
Ctx . translate( ) : 平移變換就是將原有坐標軸進行平行移動, 那麽坐標軸移動後就可以使用新坐標來繪制圖形了.
Ctx . rotate( radian ) : 該方法將坐標軸進行旋轉變換.
參數是弧度, 表示旋轉的方式. 正數表示順時針旋轉, 負數表示逆時針旋轉.
canvas狀態：
Ctx . save（）： 保存狀態，將畫的狀態封起來；
Ctx.restore（） ： 恢復成開始的狀態，也就是再次beginPath( )開始之後，不會繼承上一次的圖形屬性效果；
兩者要配合頭尾使用，才能避免繼承的問題；
Konva:
使用Konva的步驟
1.需要引入Konva庫
2.在頁面中放置一個div作為舞臺的容器(需要設置id屬性)
3.使用Konva創建舞臺
在Konva中Konva這個名字是一個命名空間,所有的構造函數都是它的成員
例： var stage = new Konva . Stage（）； Stage就是Konva的構造函數成員
4.創建舞臺使用Konva.Stage
參數必須有width, height, container
Stage : 舞臺, 類似html
var stage =new Konva . Stage（{
width : 600, 寬為600，高為400的舞臺
height : 400,
container: ‘dv‘ 容器為div
}）；
Layer : 層，類似body， 舞臺中要有層； var layer = new Konva . Layer （）;
Rect : 矩形 var rect = new Konva . Rect（{ 正方形的屬性 }）; 類似div
add （） : stage . add( Layer ) / layer . add ( rect ) 必須把層放在舞臺上， 再把元素放在層裏，就可以渲染出來；
註意點： 先創建舞臺，再創建層，再繪制圖形，再將圖形添加到層中，再將層添加到舞臺中，千萬不能還沒繪制圖形，就先把層添加到舞臺上，而再去繪制圖形，不然添加的是個空圖層；
控制臺裏獲取x.y的坐標值： Element.x( ) Element.y( ) ;
canvas基礎用法