基础绘画
路径开始和关闭
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) 弧度
绘图环境的保存和释放
save() 保存当前的绘图环境
restore() 释放前面保存的绘图环境