HTML5畫布 – 文本和字體
HTML5的畫布(canvas)不僅能夠繪制圖形和圖像，還能在畫布上添加文本和字體。愛掏網 - it200.com在本文中，我們將討論如何在HTML5畫布中添加文本和字體。愛掏網 - it200.com
在HTML5畫布中，可以使用canvas的fillText()或strokeText()方法來繪制文本。愛掏網 - it200.com這兩種方法除了顏色和字形之外，其他參數都是一樣的。愛掏網 - it200.com
// 創建畫布對象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 定義文本的樣式
ctx.font = "30px Arial";
// 繪制文本
ctx.fillText("Hello World", 10, 50);
ctx.strokeText("Hello World", 10, 80);
上述代碼中，fillText()方法用紅色填充文本，strokeText()方法則用綠色線條繪制文本。愛掏網 - it200.com在默認情況下，文本是黑色的。愛掏網 - it200.com
fillText()
fillText()方法在畫布上填充指定的文本，其語法如下：
ctx.fillText(text, x, y, maxWidth);
其中，參數text表示要填充的文本，參數x和y表示文本的起始點，maxWidth為可選參數，表示最大寬度。愛掏網 - it200.com如果填充的文本超出了maxWidth的寬度，可能會壓縮文本。愛掏網 - it200.com
strokeText()
strokeText()方法用線條繪制指定的文本，其語法與fillText()方法相同。愛掏網 - it200.com
ctx.strokeText(text, x, y, maxWidth);
定義字體
與CSS中的字體定義類似，HTML5畫布也支持使用不同的字形和字號來繪制文本。愛掏網 - it200.com
ctx.font = "italic bold 20px Arial";
上述代碼中，font屬性指定了文本的字體樣式，包括字形、字號和字體類型。愛掏網 - it200.com在HTML5畫布中，字形主要有以下幾種類型：
- normal：常規字形
- italic：斜體字形
- oblique：傾斜字形
字體類型也可以是Web安全字體：Arial、Comic Sans MS、Courier New、Georgia、Impact、Times New Roman、Trebuchet MS、Verdana。愛掏網 - it200.com
對齊和基線
當使用fillText()或strokeText()方法繪制文本時，我們可以使用textAlign和textBaseline屬性來控制文本的對齊和基線。愛掏網 - it200.com
textAlign
textAlign屬性定義繪制文本時的對齊方式。愛掏網 - it200.com它的值可以是以下之一：
- start：文本在指定的位置開始
- end：文本在指定的位置結束
- center：文本的中心被放置在指定的位置
- left：文本左對齊
- right：文本右對齊
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
上述代碼中，文本將在畫布的中心位置繪制。愛掏網 - it200.com
textBaseline
textBaseline屬性定義了在文本垂直對齊時的基線位置。愛掏網 - it200.com它的值可以是以下之一：
- alphabetic：默認值，文本基線是標準字母基線
- top：文本基線是 em 方塊的頂端
- hanging：文本基線是 懸掛基線
- middle：文本基線是 em 方塊的正中
- ideographic：文本基線是 標準漢字的基線
- bottom：文本基線是 em 方塊的底端
ctx.textBaseline = "middle";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
上述代碼中，文本將在畫布的中心位置繪制。愛掏網 - it200.com
實例
<!-- HTML5畫布 - 文本和字體 -->
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>
</body>
</html>
結論
HTML5畫布不僅支持繪制圖形和圖像，還支持在畫布上添加文本和字體。愛掏網 - it200.com通過使用fillText()或strokeText()方法，我們可以在畫布上添加文本，并使用font、textAlign和textBaseline屬性來定義其字體和對齊方式。愛掏網 - it200.com這些功能使畫布成為一個非常強大的工具，可以用于繪制各種動態和靜態的視覺效果。愛掏網 - it200.com