基礎繪畫
路徑開始和關閉
beginPath()
closePath()
起始點
moveTo()
劃線
lintTo()
矩形
rect(x,y,w,h) 矩形路徑
strokeRect(x,y,w,h) 描邊矩形
fillRect(x, y, w, h) 填充矩形
clearRect(x, y, w, h) 清除矩形
弧
arc(x,y,r,startAngle, endAngle, true/false)
文字
strokeText(text, x, y) 描邊文字
fillText(text, x, y) 填充文字
measureText(text) 求文字的寬度
font 屬性12px 字體bold italic 12px 字體
textAlign 屬性 水平對齊方式
textBaseline 屬性 垂直對齊方式
描邊
stroke() 描邊路徑
strokeStyle 屬性 設置描邊顏色
lineWidth 屬性 設置描邊寬度
填充
fill() 填充路徑
fillStyle 填充顏色
繪制圖片
基本繪圖 drawImage(img, x, y)
繪圖并設置大小 drawImage(img, x, y, w, h)
裁剪圖片 drwaImage(img, sx, sy, sw, sh, x, y, w, h) 先寫原圖的左邊大小跨算，在寫畫布的坐標大小
高級繪畫
陰影
shadowColor 屬性 陰影顏色
shadowBlur 屬性 模糊值
shadowOffsetX 屬性 水平方向的偏移量
shadowOffsetY 屬性 垂直方向的偏移量
漸變
線性漸變
createLinearGradient(x0, y0, x1, y1);
graObj.addColorStop(位置鉴分， 顏色) 位置是0~1之間的小數
徑向漸變
createRedialGradient(x0, y0, r0, x1, y1, r1);
graObj.addColorStop(位置， 顏色)
填充背景
createPattern(img, repeat) 第二個參數是填充方式
repeate
repeate-x
repeate-y
no-repeate
填充對象跟漸變對象類似右冻，相當于一種顏色
變換-縮放
scale(w, h)
變換-位移
translate(w, h)
變化-旋轉
rotate(angle) 弧度
繪圖環(huán)境的保存和釋放
save() 保存當前的繪圖環(huán)境
restore() 釋放前面保存的繪圖環(huán)境
