canvas--總結二

canvas圖形繪製

• 矩形繪製

rect(x,y,w,h)  沒有獨立路徑

strokeRect(x,y,w,h) 有獨立路徑，不影響別的繪製

fillRect(x,y,w,h) 有獨立路徑，不影響別的繪製

clearRect(x,y,w,h)  須要擦除的矩形區域

 

• 圓弧繪製

弧度概念

一個圓的弧度等於2π

角度弧度轉化   一角度等於π/180

繪製圓弧：arc(x,y,r,startAngle,endAngle,anticlockwise);

參數：

x   圓心橫座標

y   圓心縱座標

r    半徑

startAngle   開始角度

endAngle     結束角度

anticlockwise  是否逆時針方向繪製（默認false表示順時針，true表示逆時針）注意：在使用逆時針時，看需求是否要改變開始和結束的角度

 

• 繪製文本

ctx.font=「微軟雅黑」   設置字體

strokeText(text,x,y,maxWidth); /描邊文字  fillText(text,x,y,maxWidth);/ 填充文字

    參數：

    text： 要繪製的文本

    x,y ：  文本繪製的座標（文本左下角）

     maxWidth：   設置文本最大寬度，可選參數

ctx.textAngle  文本水平對齊方式，相對繪製座標來講（參數：left,center,right,start(默認),end）

ctx.direction 屬性css(rtl,ltr)start和end相關

若是是ltr,start和left表現一致（ltr--從left到right）

若是是rtl,start和right表現一致（rtl--從right到left）

ctx.textBaseline 設置基線（垂直對齊方式）

top  文本的基線處於文本的正上方 而且有一段距離

middle  文本的基線處於文本的正中間

bottom  文本的基線處於文本的正下方，並有一段距離

hanging  文本的基線處於文本正上方，而且和文本粘合

alphabetic  默認值，基線處於文本的下方，而且穿過文字

ideographic和bottom類似，可是不同//

measureText()  獲取文本寬度obj.width

 

作動畫

• 繪製圖片

drawImage();

三個參數時: drawImage(img,x,y);

• img   圖片對象，canvas對象，video對象
• x,y    圖片繪製的左上角   

五個參數時：drawImage(img,x,y,w,h);

• img   圖片對象，canvas對象，video對象
• x,y    圖片繪製的左上角  
• w,h   圖片繪製尺寸設置（圖片縮放，不是截取）

九個參數時：drawImage(img,x,y,w,h,x1,y1,w1,h1);

• img   圖片對象，canvas對象，video對象
• x,y    圖片繪製的左上角  
• w,h   圖片繪製尺寸設置（圖片縮放，不是截取）
• x1,y1,w1,h1  畫布中的一個矩形區域

• 座標變換

平移  移動畫布的圓點

translate（x.y）;  參數表示移動目標點的座標

縮放  

scale（x,y）;   參數表示寬高的縮放比例

旋轉

rotate（angle);  參數表示旋轉角度

 

參考文檔：

w3school    http://www.w3school.com.cn/tags/html_ref_canvas.asp

Canvas_API   https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial