基础绘画

路径开始和关闭

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() 释放前面保存的绘图环境