八、文字 Text
8.1字體、尺寸、樣式 Font, Size, and Style
爲了使用HTML5畫布繪製文本，我們可以使用畫布上下文對象的font屬性和fillText()方法。
要設置HTML5 Canvas文本的字體、大小和樣式，可以將canvas上下文對象的font屬性設置爲包含字體樣式、大小和字體族的字符串，以空格分隔。風格可以是normal、italic或bold。除非另有聲明，否則字體樣式將默認爲正常。
一旦設置了字體屬性，就可以使用fillText()方法繪製文本，該方法需要一個字符串以及一個表示位置的x、y值。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'italic 40pt Calibri';
context.fillText('Hello World!', 150, 100);
</script>
</body>
</html>
以上代碼演示了在畫布上用Calibri字體、斜體、40pt，在150，100位置繪製 Hello World的過程。
8.2文字顏色 Text Color
若要使用HTML5畫布設置文本顏色，可以將畫布上下文的fillStyle屬性設置爲顏色字符串、十六進制值或RGB值。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = '40pt Calibri';
context.fillStyle = 'blue';
context.fillText('Hello World!', 150, 100);
</script>
</body>
</html>
以上代碼演示了在畫布上繪製文本，並用藍色填充。
8.3文字描邊 Text Stroke
要使用HTML5 Canvas設置文本的描邊顏色，我們可以將畫布上下文對象的strokeStyle屬性設置爲顏色字符串、十六進制值或RGB值，然後使用strokeText()方法來繪製文本。
注意：要設置HTML5畫布文本的填充和描邊，必須同時使用fillText()方法和strokeText()方法。爲了正確地呈現描邊寬度，在strokeText()方法之前使用fillText()方法是很好的實踐。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 80;
var y = 110;
context.font = '60pt Calibri';
context.lineWidth = 3;
// stroke color
context.strokeStyle = 'blue';
context.strokeText('Hello World!', x, y);
</script>
</body>
</html>
以上代碼演示了在畫布上繪製文本，並用藍色描邊。
8.4文字對齊 Text Align
爲了對齊HTML5 Canvas文本，可以使用canvas上下文對象的textAlign屬性，可將其設置爲start、end、left、center或right。對齊是用fillText()方法或strokeText()方法繪製文字時，文字在X方向上的相對位置。
當文檔方向爲ltr（從左到右），textAlign屬性設置爲left或start時；或當文檔方向爲rtl（從右到左），textAlign屬性設置爲right或end時文本爲左對齊。
當文檔方向爲ltr（從左到右），textAlign屬性設置爲right或end時；或當文檔方向爲rtl（從右到左），textAlign屬性設置爲left或start時文本爲右對齊。
除非另有聲明，否則textAlign屬性將默認設置爲start。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText('Hello World!', x, y);
</script>
</body>
</html>
以上代碼演示了在畫布上採用居中對齊繪製文本。
8.5文本基線 Text Baseline
爲了用HTML5畫布繪製垂直對齊的文本，可以使用畫布上下文對象的textBaseline屬性。textBaseline屬性可以設置爲下列值之一：top、hanging、middle、alphabetic、ideographic和bottom。除非另有聲明，否則textBaseline屬性默認爲alphabetic。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = '30pt Calibri';
// textAlign aligns text horizontally relative to placement
context.textAlign = 'center';
// textBaseline aligns text vertically relative to font style
context.textBaseline = 'middle';
context.fillStyle = 'blue';
context.fillText('Hello World!', x, y);
</script>
</body>
</html>
以上代碼演示了在畫布上以上下、左右居中的方式繪製Hello World文本。
8.6文本測量 Text Metrics
爲了獲得HTML5畫布文本的文本尺寸，我們可以使用context上下文對象的measureText()方法來獲取包含文本寬度屬性的對象。此方法需要提供文本參數，並根據所提供的文本參數和當前上下文對象設置的字體返回測量對象。
注意：因爲當使用畫布上下文對象的font屬性定義字體時，以像素爲單位的文本高度等於以pt爲單位的字體大小，所以從measureText()方法返回的度量對象不提供高度尺寸。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2 - 10;
var text = 'Hello World!';
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText(text, x, y);
// get text metrics
var metrics = context.measureText(text);
var width = metrics.width;
context.font = '20pt Calibri';
context.textAlign = 'center';
context.fillStyle = '#555';
context.fillText('(' + width + 'px wide)', x, y + 40);
</script>
</body>
</html>
以上代碼演示了在畫布上測量字體爲Calibri，尺寸爲20pt的文本的寬度。
8.7文本換行 Text Wrap
爲了用HTML5 Canvas繪製換行文本，可以創建一個自定義函數，該函數需要畫布上下文對象、文本字符串、位置、最大寬度和行高度。函數應該使用畫布上下文對象的measureText()方法來計算何時換行。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var maxWidth = 400;
var lineHeight = 25;
var x = (canvas.width - maxWidth) / 2;
var y = 60;
var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';
context.font = '16pt Calibri';
context.fillStyle = '#333';
wrapText(context, text, x, y, maxWidth, lineHeight);
</script>
</body>
</html>
以上代碼演示了在畫布上的指定區域內繪製一段長文本，並根據指定的區域大小測量在適當的位置進行換行。
自定義wrapText()函數的實現過程是在一行上逐步增加文本，直到行的寬度大於區域寬度則輸出並清空行內容，否則繼續增加文本。注意：函數中循環外部的最後一行：
context.fillText(line, x, y);
其作用是輸出寬度未達到行寬度的文本。