绘制文字
- 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)
