-前言-
在此之前不是很清楚一般H5引擎是如何實現文本渲染的，正好LayaBox源碼就放在那裏，不如一起來研究研究是如何實現的。
-正文-
首先文本有兩種設置內容的方式，第一種是調用changeText，第二種是直接賦值text屬性。他們在渲染層面是存在一定差異的，這個放在最後來說。我們先來討論一般的text屬性是如何渲染的。
Text在Laya中的渲染類型
在Laya中每個被渲染到Canvas上的對象都有對應一種渲染函數，所有渲染函數都會被存儲在RenderSprite中。
而Text所對應的是_graphics類型，也就是圖形渲染類型。是通過Graphics進行渲染的。現在我們來到比較重要的函數。
TextRender->_fast_fillText函數
這個函數中會完成從文本數據的解析，生成，提交的所有步驟。函數內容就不貼上來的，同學們可以對照着源代碼比對看着。
裏面有一個很重要的執行就是去獲取字符串渲染信息，去執行getCharRenderInfo方法。
這個方法會從文本圖集TextAtlas獲取字符串圖形數據。如果沒有存儲對應key值的字符串數據，就會通過Canvas方式去生成一個對應的ImageData數據。下面簡化一下生成字符串圖形數據邏輯如下
_proto.getCharBmp = function(char,font,margin_left,margin_top){
var ctx = this.ctx;//cavans繪圖環境
ctx.font = font;//設置字體
var w = ctx.measureText(char).with;//字符串寬度
ctx.clearRect(0,0,w,h);//清空需要繪製文本的區域
ctx.save();
ctx.fillText(char,margin_left,margin_top);//生成文本
var imgData = ctx.getImageData(0,0,w,h);//獲取文本區域圖像數據
return imgData;
}
在生成了文本內容的圖像數據後，我們就可以提交數據，等待WebGL渲染了。
文本圖像數據渲染
走到這一步，會將紋理數據添加到一個MeshQuadTexture之中，Laya通過一個imgID來區分紋理來源的圖集，如果來源相同就可以使用相同同一個Submit函數，也就是在一個call函數中提交渲染。如果不是就需要新建一個提交函數單獨渲染。所有文本都存儲在一個個的圖集中，而這些圖集都是WebGlTexture對象，最終獲取的都是紋理上的紋理座標，我們下次需要繪製同樣的文本內容時就可以直接獲取紋理的座標，直接繪製即可。
changeText與text的區別
首先我們先看看分別使用這兩個方法的堆棧信息
（changeText堆棧信息）
（Text堆棧信息）
兩個方法都最終會調用到_fast_filltext方法，但他們的data屬性不一樣，直接賦值text是WordText對象，而changeText直接就是一個字符串。
如果是WordText對象會按照一個整體一併渲染，每次我們更改文本，內容一般是不相同的，所以都會去創建字符串紋理數據。
而changeText是按照字符串數組，單個字符挨着獲取紋理數據，到程序運行一段時間後，很多數據都是可以直接獲取不需要創建。
因此一般我們建議在更改文本的時候使用changeText方法。不過也要視情況而定。