繪圖路徑:

beginPath() :開始路徑
closePath():閉合路徑
moveTo(x,y):將觸筆移動到x,y點
lineTo(x,y):繪製到x,y點
stroke(): 觸筆方法 畫線 預設為黑色
fill():填充方法
rect(x,y,w,h):矩形路徑
save():儲存路徑
restore():恢復路徑

繪製矩形：
fillRect(x,y,w,h) 填充實心矩形
strokeRect(x,y,w,h) 繪製空心矩形
clearRect(x,y,w,h) 清除矩形選區

設定繪圖樣式：
fillStyle: 填充顏色
strokeStyle: 觸筆顏色
lineWidth: 觸筆寬度(線寬)

圖形邊界樣式：
lineJoin : 邊界連線點樣式
miter(預設值),round(圓角),bevel(斜角)
lineCap: 端點樣式
butt(預設值),round(圓角),square(高度多出線寬一半)

繪製圓形：
arc(x,y,r,startAngle,endAngle,false)
x,y 圓心座標位置
r 圓半徑
startAngle開始角度,以弧度表示 弧度公式:角度*PI/180
endAngle結束角度,以弧度表示 弧度公式:角度*PI/180
true/false 逆時針/順時針繪圖

繪製曲線
arcTo(x1,y1,x2,y2,r)
x1,y1 座標一 x2,y2座標二 r圓弧半徑
quadraticCurveTo(dx,dy,x1,y1)
貝塞爾曲線:dx,dy控制點 x1,y1結束座標
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
貝塞爾曲線:dx1,dy1控制點一 dx2,dy2控制點二 x1,y1結束座標

canvas變換
translate(x,y)
座標基準點偏移:從起始點為基準,移動到當前位置
rotate(弧度):旋轉 弧度公式:角度*PI/180
scale(wb,hb)縮放比例(縮放canvas繪製的圖片)

繪製圖片
圖片預載入，獲取圖片檔案
onload中呼叫
drawImage(img,x,y,w,h);繪製圖片(圖片,座標x,座標y,寬度,高度)

設定背景
createPattern(img,平鋪方式)
平鋪方式:repeat,repeat-x,repeat-y,no-repeat

顏色漸變
線性漸變:createLinearGradient(x1,y1,x2,y2)
x1,y1起始座標點
x2,y2結束座標點
徑向漸變:createRadialGradient(x1,y1,r1,x2,y2,r2)
x1,y1,r1內圓座標及半徑
x2,y2,r2外圓座標及半徑
addColorStop(位置,顏色)
位置:漸變點 0-1之間 可多個

繪製文字
strokeText(文字,x,y); 繪製空心文字
fillText(文字,x,y); 繪製實心文字
font = “font-size font-family” 注:尺寸 字型缺一不可
textAlign = “”;文字左右對齊方式
start center end left right
textBaseline文字上下對齊方式
alphabetic 預設。文字基線是普通的字母基線。
top 文字基線是 em 方框的頂端。。
hanging 文字基線是懸掛基線。
middle 文字基線是 em 方框的正中。
ideographic 文字基線是表意基線。
bottom 文字基線是 em 方框的底端。
measureText(文字).width; 文字實際寬度(只有寬度值)

陰影
shadowOffsetX,shadowOffsetY x軸、y軸偏移
shadowBlur 陰影模糊度
shadowColor 陰影顏色
預設顏色:rgba(0,0,0,0)

畫素
createImageData(sx,sy)
建立新的、空白的 ImageData 物件
getImageData(x1,y1,sx,sy)
返回 ImageData 物件，該物件為畫布上指定的矩形複製畫素資料 putImageData(img,x2,y2)
把影象資料（從指定的 ImageData 物件）放回畫布上

合成
globalAlpha設定或返回繪圖的當前 alpha 或透明值
globalCompositeOperation 設定或返回新影象如何繪製到已有的影象上
source-over預設。在目標影象上顯示源影象。
source-atop在目標影象頂部顯示源影象。源影象位於目標影象之外的部分是不可見的。
source-in在目標影象中顯示源影象。只有目標影象內的源影象部分會顯示，目標影象是透明的。
source-out在目標影象之外顯示源影象。只會顯示目標影象之外源影象部分，目標影象是透明的。
destination-over在源影象上方顯示目標影象。
destination-atop在源影象頂部顯示目標影象。源影象之外的目標影象部分不會被顯示。
destination-in在源影象中顯示目標影象。只有源影象內的目標影象部分會被顯示，源影象是透明的。
destination-out在源影象外顯示目標影象。只有源影象外的目標影象部分會被顯示，源影象是透明的。
lighter顯示源影象 + 目標影象。
copy顯示源影象。忽略目標影象。
xor使用異或操作對源影象與目標影象進行組合。

將畫布匯出為圖片
火狐、谷歌瀏覽器右鍵選單可直接匯出為圖片
toDataURL
事件
isPointInPath(x,y)
如果指定的點位於當前路徑中，返回布林值
只能判斷最後繪製出來的圖片