HTML5 Canvas核心技術—圖形、動畫與遊戲開發.pdf4

標籤：style   blog   http   os   io   strong   資料   for   

CanvasRenderingContext2D對象中用於平移、旋轉座標系的方法

鏡像

scale(1,-1)繪製垂直鏡像；scale(-1,1)繪製水平鏡像

自訂的座標變換

 

transform()，多次調用會疊加效果

setTransform()，每次調用都會清除上次的效果

兩個方法都用於旋轉、縮放、及平移座標系（可以根據公式傳入0或其他資料）

x‘=ax+cy+e

y‘=bx+dy+f

座標系旋轉公式(angle弧度)

x‘=x×cos(angle)-(y×sin(angle))

y‘=y×cos(angle)+(x×sin(angle))

平移

x‘=x+dx

y‘=y+dy

縮放

x‘=x×sx

y‘=y×sy

錯切（平行四邊形）

x‘=x+by

y‘=y

映像合成

Canvas元素有一個globalCompositeOperation屬性改變預設的映像合成行為

context.globalCompositeOperation=‘souce-in‘;

剪輯地區

設定一個地區，只有在這個地區內的操作有效，在clip()方法之前，剪輯地區是整個canvas元素

第3章 文本

Canvas繪圖對象提供了3個與文本有關的方法

strokeText(text,x,y)可選的第4個參數，指定文本的最大寬度，超出則壓縮

fillText(text,x,y)可選的第4個參數，指定文本的最大寬度，超出則壓縮

measureText(text)，返回的對象包含一個width的屬性，表示你傳遞給該方法的文本所佔據的寬度

Canvas繪圖環境對象中有三個與文本相關的屬性：font textAlign textBaseline

設定字型屬性

 Canvas預設的字型是10px sans-serif，其它值預設為normal

繪製環境對象的font屬性也支援CSS3格式的字型文法，除了樣式表文法所特有的屬性（如inherit或initial等），碰到它們會靜默失敗，另外在Canvas中設定line-height屬性會被忽略