canvas簡單入門(2)

文字方法

• strokeText(text, x, y) 描邊寫字
• fillText(text, x, y) 填充寫字
• measureText(text) 返回物件 包換文字的寬度
• font 屬性 設定 大小、字型 如 cxt.fon="100px MicrosoftYaHei";
• textAlign 屬性 水平對齊方式 start(預設)/end/center/left/right
• textBaseline 屬性 垂直對齊方式 alphabetic(預設)/top/bottom/middke/hanging/ideographic

繪製圖片（插入圖片）

插入圖片

drawImage(img, x, y)

• img image的dom元素
• x,y 插入到 畫布的位置 座標

插入圖片並改變大小

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)