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

標籤：style   blog   http   使用   strong   2014   art   ar   

文本的定位

水平與垂直定位：當使用strokeText()和fillText()繪製文本時，指定了所繪文本的X與Y座標，還有textAlign與textBaseline兩個屬性

textAlign：start（預設） center end left right，當canvas元素的dir屬性是ltr時，left效果與start相同，right與end相同，如果dir屬性是rtl，則相反

textBaseline：top bottom middle alphabetic（預設，基於拉丁字母） ideographic（日文或中文） hanging（印度語）

文本的度量：measureText()方法返回一個TextMetrics對象，包含一個width的屬性

context.measureText(...).width;

第4章 映像與視頻

Canvas繪圖環境對象提供了4個用於繪製及操作映像的方法

drawImage() getImageData() putImageData() createImageData()

映像的繪製（在映像讀取完畢後才可以載入）

繪製時，所繪的映像叫做“源映像”，記為s；繪製到的地方記為d

drawImage(image,dx,dy)

drawImage(image,dx,dy,dw,dh)（進行縮放）

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)（選取部分映像並縮放）

第一個參數是HTMLImageElement類型的映像對象或HTMLCanvasElement類型的canvas對象或HTMLVideoElement類型的視頻對象

在放大倍數大於1.0情況下，x、y取值為負數，可以使映像繪製在canvas之外

離屏canvas，經常用來存放臨時性映像資訊，通常有4個步驟：

建立用作離屏canvas元素

設定離屏canvas的寬度與高度

在離屏canvas之中進行繪製

將離屏canvas的全部或一部分內容複寫到正在顯示的canvas之中

offscreenCanvas=document.createElement(‘canvas‘)建立一個不屬於任何DOM元素的canvas元素（故稱之為離屏canvas），需要重新設定其width和height

離屏canvas會佔據一定記憶體，不過可以顯著提高繪圖效率