最近一段時間一直在做echarts繪圖方面的東西，對canvas非常感興趣，但是原生的介面也忘得差不多了，在此總結整理下。
width and height
canvas的width和height屬性是畫布實際寬度和高度，我們在這個上面繪製的圖形。如果沒有設定，預設為width:300px,height:150px。而canvas的style的width和height是canvas在瀏覽器中被渲染的高度和寬度。
高分屏下變模糊的處理
canvas是點陣圖，所以無法縮放保持不變形。在如mac上，瀏覽器就會以2個畫素點的寬度來渲染一個畫素，canvas在Retina螢幕下相當於佔據了2倍的空間，因此變得模糊。因此，要做Retina屏適配，關鍵是知道當前canvas的實際渲染倍率，然後將canvas放大到該倍率來繪製，最後將canvas壓縮成一倍的物理大小來展示。canvas中的線條大小、文字大小等都需要乘以該倍率來進行繪製。
- 實際渲染倍率的計算
ratio = window.devicePixelRatio / (context.backingStoreRatio || 1);
複製程式碼- 縮放canvas
canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
複製程式碼注意style上一定要加單位，不然你會看到驚喜。
渲染上下文
getContext('2d')
getContext('webgl')
//目前瀏覽器未實現
getContext('webgl2')
複製程式碼柵格 and 座標空間
柵格的起點為左上角（座標為（0,0）)
矩形
x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。width和height設定矩形的尺寸。
- fillRect
- strokeRect
- clearRect
- rect (屬於路徑範疇)
fillRect(x, y, width, height)
繪製一個填充的矩形
strokeRect(x, y, width, height)
繪製一個矩形的邊框
clearRect(x, y, width, height)
清除指定矩形區域，讓清除部分完全透明
rect(x, y, width, height)
將一個矩形路徑增加到當前路徑上，執行後moveTo()方法自動設定座標引數為（0,0）
複製程式碼rect與其他不同的是rect是路徑，二其他的都可以直接在canvas上繪製出來。
路徑
- beginPath
- closePath
beginPath()
新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑。
closePath()
閉合路徑之後圖形繪製命令又重新指向到上下文中。
這個方法會通過繪製一條從當前點到開始點的直線來閉合圖形。
複製程式碼當我們在呼叫fill時會自動閉合路徑，stroke不會閉合。
第二張圖片中，繪製圓形前沒有使用beginpath的函式，因此stroke時會連起來。
移動筆觸
- moveTo(x,y) 移動當前畫筆位置
線
- lineTo(x,y)
圓弧
- arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（預設為順時針）來生成。Angle單位是弧度。
二次貝塞爾曲線及三次貝塞爾曲線
quadraticCurveTo(cp1x, cp1y, x, y)
繪製二次貝塞爾曲線，cp1x,cp1y為一個控制點，x,y為結束點。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪製三次貝塞爾曲線，cp1x,cp1y為控制點一，cp2x,cp2y為控制點二，x,y為結束點。
複製程式碼