文字方法
- strokeText(text, x, y) 描邊寫字
- fillText(text, x, y) 填充寫字
- measureText(text) 返回對(duì)象 包換文本的寬度
- font 屬性 設(shè)置 大小尿孔、字體 如
cxt.fon="100px MicrosoftYaHei"
; - textAlign 屬性 水平對(duì)齊方式 start(默認(rèn))/end/center/left/right
- textBaseline 屬性 垂直對(duì)齊方式 alphabetic(默認(rèn))/top/bottom/middke/hanging/ideographic
繪制圖片(插入圖片)
插入圖片
drawImage(img, x, y)
- img image的dom元素
- x,y 插入到 畫布的位置 坐標(biāo)
插入圖片并改變大小
drawImage(img, x, y, width, height)
插入裁剪后的圖片
drawImage(img, sx,sy,swidth,sheight, x, y, width, height)
- sx/sy: 圖片上開始裁剪的位置
- swidth/sheight : 裁剪圖片的大小
陰影
- shadowColor 陰影顏色
- shadowBlur 陰影的模糊值
- shadowOffsetX 陰影的左偏移量
- shadowOffsetY 陰影的右偏移量
漸變
線性漸變
var grd = cxt.createLinearGradien(x, y, x1, y1);
grd.addColorStop(位置, color)