以前用javascript實現過令文本逐字輸出的效果，今天我來用html5中的canvas實現一下。canvas裡的內容可不像<p>那樣好操作，首先，你需要懂得一些html5的API才能操作canvas，而<p>可以用DOM直接操作，相對而言，canvas還是要比<p>複雜些。那麼本篇就為大家講述入股令文本逐字輸出。
首先我先說明，本篇我不打算用任何引擎，因為今天我們是來研究技巧和原理的。
一，原理做一個富有技巧的程式我們首先得搞清楚原理，而令文本逐字輸出的原理很簡單。
假如我們有一串字元，我們可以把它們分成一個個字元，然後裝入數組。例入有一個字串yorhom，那麼我們可以把他分成
var arr = ['y','o','r','h','o','m'];
的形式，這樣要輸出文字的話就可以編曆這個數組，然後每隔一段時間就把當前遍曆的那個字元輸出。這樣一來就可以將文字逐漸輸出。
光說還不行，我們還得去實現，否則就是紙上談兵。
二，實現首先我們看看代碼：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html5輸出文字類</title><script type="text/javascript">function type(){//畫布的idvar canvasId = "mycanvas";//用於輸出文字的變數var sub = 0;var arr = [];var time = 0;//設定文字顏色，字型，大小，x和y座標var x = 0;var y = 50;var color = "red";var size = "20";var font = "宋體";//設制文字內容var tosplitFont = "I'm yorhom，這是個令文本逐字顯示的小程式";sub = 0; arr = tosplitFont.split('');var c = document.getElementById(canvasId);var ctx = c.getContext("2d");ctx.font = size+"px"+" "+font;ctx.fillStyle = color;ctx.clearRect(0,0,c.width,c.height);//迴圈輸出for(var i=0;i<arr.length;i++){setTimeout(function(){ctx.fillText(arr[sub],x,y);x += ctx.measureText(arr[sub]).width;sub += 1;},time);time += 100;}}</script></head><body onload="type()"><canvas width="500",height="300" id="mycanvas"></canvas></body></html>
這就是包括html和javascript的所有代碼，只有46行，看來不怎麼難。接下來我將講解 一下這些纖纖渣渣的代碼。
html裡的代碼不解釋，我們直接跳到javascript部分。看看type函數：
function type(){//畫布的idvar canvasId = "mycanvas";//用於輸出文字的變數var sub = 0;var arr = [];var time = 0;//設定文字顏色，字型，大小，x和y座標var x = 0;var y = 50;var color = "red";var size = "20";var font = "宋體";//設制文字內容var tosplitFont = "I'm yorhom，這是個令文本逐字顯示的小程式";sub = 0; arr = tosplitFont.split('');var c = document.getElementById(canvasId);var ctx = c.getContext("2d");ctx.font = size+"px"+" "+font;ctx.fillStyle = color;ctx.clearRect(0,0,c.width,c.height);//迴圈輸出for(var i=0;i<arr.length;i++){setTimeout(function(){ctx.fillText(arr[sub],x,y);x += ctx.measureText(arr[sub]).width;sub += 1;},time);time += 100;}}
在這裡，我解釋一下變數sub,time和arr。首先sub是遍曆數組的下標，也許你會說可以用控制迴圈的變數作為下標，其實我也試過，如果用控制迴圈的變數的來作下標，會出現錯誤。因為在javascript中的迴圈會先迴圈完，然後再慢慢執行裡的內容。所以如果你用控制迴圈的變數的來作下標，那麼輸出的就一直是最後一個。因此我設定了sub變數，讓它在迴圈內部增加，這樣即使迴圈裡最後慢慢執行，那也無妨。
arr是裝滿被分開的文字的數組，通過split方法賦值。如下：
arr = tosplitFont.split('');
split用法是沒遇見參數字元，就將這個字元前面的那一個加到數組中。我表述可能不大清楚，還是讓專業人士w3cschool為你解答吧： http://www.w3school.com.cn/js/jsref_split.asp
time是個控制等待時間的變數，因為setTimeout是在某一個時刻做某事，所以我們需要不斷改這個時刻。
接下來我們看輸出部分：
//迴圈輸出for(var i=0;i<arr.length;i++){setTimeout(function(){ctx.fillText(arr[sub],x,y);x += ctx.measureText(arr[sub]).width;sub += 1;},time);time += 100;}
首先我們先遍曆了上述的arr，接下來我們在裡面通過setTimeout在某個時刻輸出文字。
fillText是什嗎？我想我只能告訴你是html5中輸出文字的東東，看看專業人士的又一講解：http://www.w3school.com.cn/html5/canvas_filltext.asp
由於html5中如果不是一次性輸出文字，文字座標且不改變，那麼文字將疊在一起。所以我們只有改變座標，由於我們用變數x和y控制文字位置，所以我們只用改變x就能將文字移到它該去的位置。我首先想到了可以將x設定為當前字元傳的長度。
但怎麼才能算出這個字元傳的長度呢？我無意間看到了measureText方法，它可以取出當前字串的長度，所以我們就利用這個玩意兒算出上個字元長度，然後用x加上這個長度，就可以算出下一個文字該去的位置。measureText怎麼用呢，看看這裡吧：http://www.w3school.com.cn/html5/canvas_measuretext.asp
就這樣，逐字輸出就搞定了。
三，源碼下載源碼在這裡：http://files.cnblogs.com/ducle/html5-%E8%BE%93%E5%87%BA%E6%96%87%E5%AD%97.rar
貼幾張demo圖，不想看代碼只想看效果的朋友可以看看：
今天是清明節，但由於這個節日太xx了，所以我就不祝大家清明節快樂了。
----------------------------------------------------------------
歡迎大家轉載我的文章。
轉載請註明：轉自Yorhom's Game Box
歡迎繼續關注我的部落格
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
