Html5 Canvas學習之路（四）

Html5 Canvas 的文本API

---

1. 顯示基本文本

要在畫布上顯示文本，最簡單的定義方式是經過使用CSS字體樣式屬性的標準值設置context.font的樣式:font-style,font-weight,font-siza,font-face。

Html5 Canvas上下文對象包含一個有用的方法 measureText()。當提供一個文本串時，它將在 TextMetrics 對象的表單中基於當前上下文的設置返回一些關於該文本的屬性。如今 TextMetrics對象只有一個屬性： width。TextMetrics對象的 Width屬性給定了在畫布上渲染時文本確切的像素寬度。它對文本居中很是有用。

能夠用measureText()方法計算出文本的居中位置：

function textPos(message) {
        var metrics = context.measureText(message);
        var textWidth = metrics.Width;
        var xPosition = (theCanvas.width/2) - (textWidth/2);
        var yPosition = (theCanvas.height/2);
        return {x:xPosition ,y:yPosition};
        }

有兩種方法在畫布上渲染文本分別是：

• fillText([text],[x],[y],[maxWidth]);
• strokeText([text],[x],[y],[maxWidth]);

text是指在畫布上渲染的文本，x和y分別對應了文本在畫布上的座標，maxWidth是指在畫布上渲染的最大寬度。

2. 設置文本字體

在Canvas中設置字體，只須要經過把CSS兼容的字符串應用到context.font屬性，便可設置字體的大小、磅重、樣式以及字體外觀。基本格式以下：

• [font style] [font weight] [font size] [font face]

例如： context.font = "italic bold 24px serif"。

能夠設置合理的屬性並將其拼接起來：
context.font = fontWeight + ' ' + fontStyle + ' ' + fontSize + 'px ' + fontFace

能夠用新的HTML5 range表單控件來爲字體指定大小。range是一種<input>類型，能夠在HTML頁面上建立一個滑塊來限制字數輸入的範圍，它有四種屬性，min是範圍最小值、max是範圍最大值、step是範圍滑塊移動的步長單元數、value是默認範圍值。

若想要給文本設置顏色，只需給context.fillStyle或context.strokeStyle屬性設置一個有效的CSS RGB 顏色。（補充：另外能夠用jsColor來處理字體顏色。）

在Canvas中，對其字體有兩個選項，及垂直和水平。這些對其是參照Canvas自己做用於文本的，並且它圍繞在文字最頂、最低、最右、最左四邊的看不見的邊框，有以下兩個屬性用於垂直和水平對齊：

• context.textBaseline
• context.textAlign

3. 透明度、陰影、漸變

能夠利用Canvas上下文的globalAlpha屬性設置對象的透明度。還能夠設置Canvas上下文對象的陰影屬性來設置陰影。

1)線性漸變：

能夠調用上下文 createLinearGradient()方法來建立漸變參考線。

• var gradient = context.creatLinearGradient([x0],[y0],[x1],[y1]);

x0和y0是參考線的起點，x1和y1是參考線的終點座標。

建立了漸變參考線以後，還需添加產生漸變層次的顏色，這須要如下函數實現：

• addColorStop([offset],[color])

這個函數有兩個參數。offset這是漸變參考線開始顏色層次的位移，整個漸變由0.0到1.0的十進制表明的百分數值來定義。color。表明「#RRGGBB」格式有效的CSS顏色。

2）徑向漸變：

徑向漸變與線性漸變相似，只不過它是一個圓錐形，而不是一條直線。這個圓錐由中心點和兩個圓的半徑定義而成經過調用Canvas上下文的createRadialGradient()函數來實現。

4. 最後

先來一個Canvas對象的使用方法：

function createImageDataPressed(e) {
         var imageDataDisplay = document.getElementById('imageDataDisplay');
         imageDataDisplay.value = theCanvas.toDataURL();
         window.open(imageDataDisplay.value,"canvasImage","left=0,top=0,width="
         + theCanvas.width + ",height="+theCanvas.height +
         ",too;bar=0,resizable=0");
     }

而後再用上述知識點實現一個Text Arranger: