canvas

绘制文字

• strokeText(text,x,y)描边文字
• font='size 字体' 设置字体大小和字体,如：cxt.font='100px MicrosoftYaHei'
  按照font-style/font-variant/font-weight/font-size/line-height/font-family 的顺序进行设置
• fillText(text,x,y)填充文字

不需要开始和闭合

绘制上下文的文字属性

• textAlign属性，水平对齐方式，start(默认)/end/center/left/right

textAlign定义水平方向上对齐方式可取值有start、center、end、left、right.默认值为start，其中start与leftt和right与end效果是一样的，如果我们在canvas元素定义dir属性是ltr那么就是从左往右如果该属性值为rtl那么将是按照从右向左计算起始点,此时start与right和left与end效果是不一样的。

• textBaseline属性，水平对齐方式 alphabetic(默认)/top/bottom/middle/hanging/ideographic
• measureText()可以测量文本宽度

绘制图片

• 插入图片
  drawImage(img x,y)
  img:image的dom元素，如：var img=document.getElementById('id')

  x,y插入到画布位置坐标

• drawImage(img,sx,sy,swidth,sheight,x,y,width,height)插入剪切后的图片

  sx/sy:图片上开始裁剪的位置；

  swidth/sheight:裁剪图片的大小；

阴影

• shadowColor 阴影颜色
• shadowBlur 阴影的模糊值
• shadowOffsetX 阴影的左偏移量
• shadowOffsetY 阴影的右偏移量

渐变

• 线性渐变 var grd=cxt.createLinearGradient(x,y,x1,y1)
grd.addColorStop(位置，color)