文本繪制
Canvas 2D API 提供了兩種繪制文本的方法和一個檢查字體寬度的方法
方法變量說明
| 變量名 | 類型 | 是否必須 | 說明 |
|---|---|---|---|
| text | string | 是 | 待填充文字 |
| x | Number | 是 | 指定左上角位置的X坐標 |
| y | Number | 是 | 指定左上角位置的Y坐標 |
| maxWidth | Number | 否 | 繪制的最大寬度，如果文本沒有達到最大寬度大小，按正常顯示，如果超過了設置的最大寬度，則會壓縮文本寬度到設定值 |
填充文本
填充文本 語法
在指定的位置填充文本，可選繪制的最大寬度
即繪制的文本為實心fillText(text, x, y [, maxWidth])
填充文本 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
//沒有配置最大寬度
ctx.fillText("Hello IMooc",10,50);
</script>
</body>
</html>
空心文本
繪制空心文本 語法
在指定的(x,y)位置繪制文本邊框，可選繪制的最大寬度
即繪制的文本為空心strokeText(text, x, y [, maxWidth])
繪制空心文本 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
//傳入最大寬度
ctx.strokeText("Hello IMooc",10,50, 100);
</script>
</body>
</html>
檢查文本寬度
檢查文本寬度 語法
此方法返回一個被測量文本 TextMetrics 對象
此對象包含了例如 text文字所占寬度width、文本矩形邊界右側距離等多個屬性measureText(text)
檢查文本寬度 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c = document.getElementById("imooc");
var ctx = c.getContext("2d");
var txt = "Hello IMooc"
// measureText不會渲染canvas，知識返回了一個包含多個屬性的對象
var textMetricsObj = ctx.measureText(txt)
alert(textMetricsObj.width)
</script>
</body>
</html>
文本樣式
Canvas 2D API文本繪制提供了四個設置文本樣式的屬性，我們一個一個來看
字體設置 .font
字體設置 .font 說明
- .font 是 Canvas 2D API 描述繪制文字時，為當前字體樣式設置的屬性。
- 使用和 CSS font 規范相同的字符串值。
- 默認值: 10px sans-serif
語法
ctx.font = value;
參數說明
| 變量名 | 類型 | 是否必須 | 說明 |
|---|---|---|---|
| value | string | 是 | 符合CSS中font的語法字符串 |
字體設置 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
//設置了字體大小，和字體樣式
ctx.font="30px Microsoft YaHei,SimSun,Arial";
ctx.fillText("Hello IMooc",10,50);
</script>
</body>
</html>
對齊設置 .textAlign
對齊設置 .textAlign 說明
- .textAlign 是 Canvas 2D API 提供的設置文本對其方式的屬性。
- 默認值: start
特別說明
該對齊方式是針對 .fillText/.strokeText 方法的 X 的值。所以如果 textAlign="center"，那么該文本將畫在 x-50%*width的位置
語法
ctx.textAlign = value;
value值說明
value可取如下值
| value | 說明 | 特別說明 |
|---|---|---|
| left | 文本左對齊 | 對齊方式是針對 .fillText/.strokeText 方法的 X 的值 |
| right | 文本右對齊 | 對齊方式是針對 .fillText/.strokeText 方法的 X 的值 |
| center | 文本居中對齊 | 對齊方式是針對 .fillText/.strokeText 方法的 X 的值 |
| start | 文本對齊界線開始的地方,默認左對齊 | 搭配direction屬性使用，ltr：從左向右，rtl：從右向左 |
| end | 文本對齊界線結束的地方,默認右對齊 | 搭配direction屬性使用，ltr：從左向右，rtl：從右向左. |
補充
- 如果你想讓文本在整個canvas居中，只需要將fillText的x值設置成canvas的寬度的一半，.textAlign值設置成center。
- start和stop默認情況下是等同於left和right的。如果設置direction的值為：rtl，則剛好相反
- direction屬性還未被納入標准文檔，兼容性很差， 所以針對start和end的使用參照left和right
對齊設置 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
//X的值為175，在畫布正中間
ctx.font="30px Microsoft YaHei,SimSun,Arial";
ctx.textAlign="left"
ctx.fillText("Left Imooc",175,50);
ctx.textAlign="center"
ctx.fillText("Center IMooc",175,100);
ctx.textAlign="right"
ctx.fillText("Right IMooc",175,150);
</script>
</body>
</html>
垂直對其設置 .textBaseline
垂直對其設置 .textBaseline 說明
- .textBaseline 是 Canvas 2D API 提供的文本垂直對齊的屬性（基線對齊屬性）。
- 默認值: alphabetic
語法
ctx.textBaseline = value;
value值說明
value可取如下值
| value | 說明 | 特別說明 |
|---|---|---|
| top | 文本基線在文本塊的頂部 | |
| hanging | 文本基線是懸掛基線 | |
| middle | 文本基線在文本塊的中間 | |
| alphabetic | 文本基線是標准的字母基線。 | |
| ideographic | 文字基線是表意字基線 | 如果字符本身超出了alphabetic 基線，那么ideograhpic基線位置在字符本身的底部。 |
| bottom | 文本基線在文本塊的底部 | 與 ideographic 基線的區別在於 ideographic 基線不需要考慮下行字母。 |
補充
- 如果你想讓文本在整個canvas居中，只需要將fillText的x值設置成canvas的寬度的一半，.textAlign值設置成center。
- start和stop默認情況下是等同於left和right的。如果設置direction的值為：rtl，則剛好相反
- direction屬性還未被納入標准文檔，所以兼容性很差， 不建議使用
字體設置 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
ctx.font="30px Microsoft YaHei,SimSun,Arial";
//設置了不同垂直對齊方式
ctx.textBaseline="top"
ctx.fillText("TOPtop",0,50, 100);
ctx.textBaseline="hanging"
ctx.fillText("HANGING hanging",150,50, 100);
ctx.textBaseline="middle"
ctx.fillText("MIDDLEmiddle",305,50);
</script>
</body>
</html>
文本方向設置 .direction
文本方向設置 .direction 說明
- .textBaseline 是 Canvas 2D API 提供的文本垂直對齊的屬性（基線對齊屬性）。
- 默認值: inherit
語法
ctx.textBaseline = value;
value值說明
value可取如下值
| value | 說明 | 特別說明 |
|---|---|---|
| ltr | 文本方向從左向右。 | left to right 縮寫 |
| rtl | 文本方向從右向左。 | right to left 縮寫 |
| inherit | 根據情況繼承 canvas 元素或者 Document | 默認從左向右 |
補充
- direction屬性還未被納入標准文檔，所以兼容性很差，不建議使用
字體設置 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
</head>
<body>
<canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
ctx.font="30px Microsoft YaHei,SimSun,Arial";
//設置了不同垂直對齊方式
ctx.direction = "ltr";
ctx.fillText("Hello IMooc",305,50);
</script>
</body>
</html>