canvas web api手冊

1.canvas元素

<canvas id="canvas" width="150" height="150"></canvas>

2.渲染上下文

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

3.檢查支持性

var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

4.柵格
在我們開始畫圖之前，我們需要了解一下畫布柵格（canvas grid）以及座標空間。上面的HTML模板中有個寬150px, 高150px的canvas元素。如下圖所示，canvas元素默認被網格所覆蓋。通常來說網格中的一個單元相當於canvas元素中的一像素。柵格的起點爲左上角（座標爲（0,0））。所有元素的位置都相對於原點定位。所以圖中藍色方形左上角的座標爲距離左邊（X軸）x像素，距離上邊（Y軸）y像素（座標爲（x,y））。

5.繪製矩形

    //繪製一個填充的矩形
    fillRect(x, y, width, height)
    //繪製一個矩形的邊框
    strokeRect(x, y, width, height)
    //清除指定矩形區域，讓清除部分完全透明。
    clearRect(x, y, width, height)

6.繪製函數
新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑

beginPath()

閉合路徑之後圖形繪製命令又重新指向到上下文中

closePath()

通過線條來繪製圖形輪廓。

stroke()

通過填充路徑的內容區域生成實心的圖形。

	fill()

將筆觸移動到xy點

moveTo(x, y)

繪製一條從當前點到xy點的直線

lineTo(x, y)

畫一個以（x,y）爲圓心的以radius爲半徑的圓弧（圓）。從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認爲順時針）來生成。該方法有六個參數：x,y爲繪製圓弧所在圓上的圓心座標。radius爲半徑。
startAngle以及endAngle參數用弧度定義了開始以及結束的弧度。這些都是以x軸爲基準。參數anticlockwise爲一個布爾值。爲true時，是逆時針方向，否則順時針方向。
arc()函數中表示角的單位是弧度，不是角度。角度與弧度的js表達式:
*弧度=(Math.PI/180)角度。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

根據給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。

arcTo(x1, y1, x2, y2, radius)

繪製二次貝塞爾曲線，cp1x,cp1y爲一個控制點，x,y爲結束點。

quadraticCurveTo(cp1x, cp1y, x, y)

繪製三次貝塞爾曲線，cp1x,cp1y爲控制點一，cp2x,cp2y爲控制點二，x,y爲結束點。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

7.顏色
設置圖形的填充顏色。

fillStyle = color|gradient|pattern
color
    DOMString 字符串，被轉換成 CSS <color> 顏色值.
gradient
    CanvasGradient 對象 （線性漸變或者放射性漸變）.
pattern
    CanvasPattern 對象 （可重複圖像）。 

設置圖形輪廓的顏色。

strokeStyle = color|gradient|pattern

本文參考鏈接
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API