繪制文字
- strokeText(text,x,y)描邊文字
- font='size 字體' 設(shè)置字體大小和字體,如：
cxt.font='100px MicrosoftYaHei'
按照font-style/font-variant/font-weight/font-size/line-height/font-family 的順序進(jìn)行設(shè)置 - fillText(text,x,y)填充文字
不需要開始和閉合
繪制上下文的文字屬性
- textAlign屬性，水平對(duì)齊方式笤虫，start(默認(rèn))/end/center/left/right
textAlign定義水平方向上對(duì)齊方式可取值有start、center、end材泄、left悠鞍、right.默認(rèn)值為start染簇，其中start與leftt和right與end效果是一樣的参滴，如果我們?cè)赾anvas元素定義dir屬性是ltr那么就是從左往右如果該屬性值為rtl那么將是按照從右向左計(jì)算起始點(diǎn),此時(shí)start與right和left與end效果是不一樣的。
- textBaseline屬性锻弓，水平對(duì)齊方式 alphabetic(默認(rèn))/top/bottom/middle/hanging/ideographic
- measureText()可以測(cè)量文本寬度
繪制圖片
-
插入圖片
drawImage(img x,y)
img:image的dom元素卵洗，如：var img=document.getElementById('id')x,y插入到畫布位置坐標(biāo)
-
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)
