HTML5 畫布中的文字 · ZetCode 中文系列教程

# HTML5 畫布中的文字 > 原文： [https://zetcode.com/gfx/html5canvas/text/](https://zetcode.com/gfx/html5canvas/text/) 在 HTML5 畫布教程的這一部分中，我們將處理文本。 ## 文字和字體字符是表示諸如字母，數字或標點符號之類的項目的符號。字形是用于呈現字符或字符序列的形狀。在拉丁字母中，字形通常代表一個字符。在其他書寫系統中，一個字符可能由幾個字形組成，例如?，?，ú，?。這些是帶有重音符號的拉丁字符。可以使用各種字體在畫布上繪制文本。字體是一組具有特定字體設計和大小的字體字符。各種字體包括 Helvetica，Georgia，Times 或 Verdana。具有特定樣式的字形的集合形成字體面。字體的集合構成字體家族。 ## 繪制文字 HTML5 `canvas`上下文有兩種繪制文本的方法：`strokeText()`和`fillText()`。不同之處在于`fillText()`方法繪制文本的內部，而`strokeText()`方法繪制文本的輪廓。 `drawing_text.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas drawing text</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = "28px serif"; ctx.fillText("ZetCode", 15, 25); ctx.font = "36px sans-serif"; ctx.strokeText("ZetCode", 30, 80); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="200" height="150"> </canvas> </body> </html> ``` 該示例在畫布上繪制兩個字符串。 ```js ctx.font = "28px serif"; ``` `canvas`上下文`font`屬性指定繪制文本時使用的當前文本樣式。我們指定字體大小和字體系列。 ```js ctx.fillText("ZetCode", 15, 25); ``` `fillText()`方法的第一個參數是要渲染的文本。接下來的兩個參數是文本起點的 x 和 y 坐標。 ![Drawing text](https://img.kancloud.cn/97/da/97da0690fa4eb935ba8a4d90bf22d29b_359x259.jpg) 圖：繪制文本 ## 字形在下面的示例中，我們演示了幾種字體屬性。 `text_font.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas drawing text</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = "normal bold 18px serif"; ctx.fillText('nice', 10, 20); ctx.font = "italic 18px serif"; ctx.fillText('pretty', 70, 20); ctx.font = "small-caps bolder 18px serif"; ctx.fillText('beautiful', 160, 20); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="150"> </canvas> </body> </html> ``` 該示例繪制了三個具有不同字體樣式，變體和粗細的單詞。 ```js ctx.font = "normal bold 18px serif"; ``` 此行設置`normal`字體樣式和`bold`字體粗細。 ```js ctx.font = "small-caps bolder 18px serif"; ``` 此行設置`small-caps`字體變體和`bolder`字體粗細。 ![Text font](https://img.kancloud.cn/e9/51/e95113edf54fcfb2e4dd82e8bb6b4b00_347x163.jpg) 圖：文本字體 ## 文字基線 Canvas 2D API 的`textBaseline`屬性指定在繪制文本時使用的當前文本基線。它接受以下值：頂部，底部，中間，字母，懸掛，表意。默認為字母。 `text_baseline.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas text baseline</title> <style> canvas {border: 1px solid #bbbbbb} </style> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.translate(0.5, 0.5); ctx.setLineDash([2]); ctx.fillStyle = 'gray'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, 100); ctx.lineTo(canvas.width, 100); ctx.stroke(); ctx.font = '20px serif'; ctx.textBaseline = "top"; ctx.fillText('Top', 5, 100); ctx.textBaseline = "bottom"; ctx.fillText('Bottom', 60, 100); ctx.textBaseline = "middle"; ctx.fillText('Middle', 150, 100); ctx.textBaseline = "alphabetic"; ctx.fillText('Alphabetic', 240, 100); ctx.textBaseline = "hanging"; ctx.fillText('Hanging', 360, 100); ctx.textBaseline = "ideographic"; ctx.fillText('Ideographic', 460, 100); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="600" height="200"> </canvas> </body> </html> ``` 該示例使用所有可用的文本基線繪制字符串。 ```js ctx.textBaseline = "top"; ctx.fillText('Top', 5, 100); ``` 這些行在頂部基線模式下繪制文本。 ![Text baseline](https://img.kancloud.cn/92/8f/928fe660887296764a517eeb1f77489a_628x319.jpg) 圖：文字基線 ## 文字對齊 Canvas 2D API 的`textAlign`屬性指定在繪制文本時使用的當前文本對齊方式。對齊基于`fillText()`方法的 x 值。可能的值為：左，右，居中，開始和結束。 `text_alignment.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas text alignment</title> <style> canvas {border: 1px solid #bbbbbb} </style> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var cw = canvas.width/2; ctx.fillStyle = 'gray'; ctx.translate(0.5, 0.5); ctx.setLineDash([2]); ctx.beginPath(); ctx.moveTo(cw, 0); ctx.lineTo(cw, canvas.height); ctx.stroke(); ctx.font = "16px serif"; ctx.textAlign = "center"; ctx.fillText("center", cw, 20); ctx.textAlign = "start"; ctx.fillText("start", cw, 60); ctx.textAlign = "end"; ctx.fillText("end", cw, 100); ctx.textAlign = "left"; ctx.fillText("left", cw, 140); ctx.textAlign = "right"; ctx.fillText("right", cw, 180); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="200"> </canvas> </body> </html> ``` 該示例使用所有可用的文本對齊方式繪制文本。 ```js var cw = canvas.width/2; ``` 我們計算畫布中間點的 x 坐標。我們的文字圍繞這一點對齊。 ```js ctx.beginPath(); ctx.moveTo(cw, 0); ctx.lineTo(cw, canvas.height); ctx.stroke(); ``` 為了更好地視覺理解，我們在畫布的中間繪制了一條細的垂直線。 ```js ctx.textAlign = "center"; ctx.fillText("center", cw, 20); ``` 這些線使文本水平居中。 ![Text alignment](https://img.kancloud.cn/25/17/2517c767257a79c9991c50c43271d592_398x320.jpg) 圖：文本對齊在 HTML5 畫布教程的這一部分中，我們介紹了文本。