Canvas 繪圖學習筆記2

1 繪製文本

fillText(string,x,y,maxWidth)  //填充試繪製文本

strokeText(string,x,y,maxWidth) 畫線試繪製文本

設置字體樣式：

context.font 文字的字體樣式

可選屬性：

　　font-style 字體樣式

　　font-variant　　字體變體

　　font-weight　　字體粗細

　　font-size

　　font-family

　　caption

　　icon

　　menu　　

　　message-box

　　small-caption　

　　status-bar

實例：

ctx.font = "30px Georgia"

context.textAlign 文字的對齊方式

　　start

　　end

　　center

　　left

　　right

context.textBaseline 調整文本的基線

　　top

　　hanging

　　middle

　　alphabetic

　　ideographic

　　bottom

2.ctx.globalCompositeOperation 設置圖形交叉參數

source-atop

....

3.canvas狀態的保存與恢復

ctx.save()  保存之前的繪圖參數,壓棧保存

ctx.restore() 恢復之前保存的繪圖參數

4.陰影

ctx.shadowColor

ctx.shadowOffsetX 陰影對於圖像的水平偏移

ctx.shadowOffsetY 陰影對於圖像的垂直偏移

ctx.shadowBlur 模糊參數

5.繪製圖像

var img = new Image();
img.src = "......."

img.onload = function()
{
    ctx.drawImage(img,x,y);          
}

ctx.drawImage(img,x,y); 

ctx.drawImage(img,x,y,width,height); 
　　width:繪製圖片的最終寬度
　　height:繪製圖片的最終高度

ctx.drawImage(img,sx,sy,swidth,sheight,dx,dy,width,height); 
　　sx:裁剪區域起始橫坐標
　　sy:裁剪區域起始縱坐標
　　swidth：裁剪區域寬度
　　sheight：裁剪區域高度
6.drawImage可以用來繪製視頻