本节课，我们学习 Canvas 绘制文本。
在前一个章节中看过 应用样式和颜色 之后，我们现在来看一下如何在 canvas 中绘制文本。
绘制文本
canvas 提供了两种方法来渲染文本：
fillText(text, x, y [, maxWidth])
在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
strokeText(text, x, y [, maxWidth])
在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。
一个填充文本的示例
文本用当前的填充方式被填充：
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello Web176", 10, 50);
}我们看下完整的DEMO：
HTML
x
55
55
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>绘制文本 - a_filltext_example | Web176教程www.web176.com</title>6
<meta name="robots" content="noindex, nofollow">7
<style>8
body {9
padding: 0;10
margin: 0;11
}12
13
svg:not(:root) {14
display: block;15
}16
17
.playable-code {18
background-color: #f4f7f8;19
border: none;20
border-left: 6px solid #558abb;21
border-width: medium medium medium 6px;22
color: #4d4e53;23
height: 100px;24
width: 90%;25
padding: 10px 10px 0;26
}27
28
.playable-canvas {29
border: 1px solid #4d4e53;30
border-radius: 2px;31
}32
33
.playable-buttons {34
text-align: right;35
width: 90%;36
padding: 5px 10px 5px 26px;37
}38
</style>39
40
</head>41
<body>42
43
<canvas id="canvas" width="300" height="100"></canvas> 44
45
<script type="text/javascript">46
function draw() {47
var ctx = document.getElementById('canvas').getContext('2d');48
ctx.font = "48px serif";49
ctx.fillText("Hello Web176", 10, 50);50
}51
draw();52
</script>53
54
</body>55
</html>点击运行按钮，演示看下吧。
一个文本边框的示例
文本用当前的边框样式被绘制：
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.strokeText("Hello Web176", 10, 50);
}演示下吧。
HTML
xxxxxxxxxx1
55
55
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>绘制文本 - a_filltext_example | Web176教程www.web176.com</title>6
<meta name="robots" content="noindex, nofollow">7
<style>8
body {9
padding: 0;10
margin: 0;11
}12
13
svg:not(:root) {14
display: block;15
}16
17
.playable-code {18
background-color: #f4f7f8;19
border: none;20
border-left: 6px solid #558abb;21
border-width: medium medium medium 6px;22
color: #4d4e53;23
height: 100px;24
width: 90%;25
padding: 10px 10px 0;26
}27
28
.playable-canvas {29
border: 1px solid #4d4e53;30
border-radius: 2px;31
}32
33
.playable-buttons {34
text-align: right;35
width: 90%;36
padding: 5px 10px 5px 26px;37
}38
</style>39
40
</head>41
<body>42
43
<canvas id="canvas" width="300" height="100"></canvas> 44
45
<script type="text/javascript">46
function draw() {47
var ctx = document.getElementById('canvas').getContext('2d');48
ctx.font = "48px serif";49
ctx.strokeText("Hello Web176", 10, 50);50
}51
draw();52
</script>53
54
</body>55
</html>有样式的文本
在上面的例子用我们已经使用了 font 来使文本比默认尺寸大一些。还有更多的属性可以让你改变 canvas 显示文本的方式：
font = value
当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。
textAlign = value
文本对齐选项。可选的值包括：start, end, left, right or center. 默认值是 start。
textBaseline = value
基线对齐选项。可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
如果你之前使用过 CSS，那么这些选项你会很熟悉。
textBaseline 例子
编辑下面的代码，看看它们在 canvas 中的变化：
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello Web176教程", 0, 100);看下演示DEMO：
HTML
xxxxxxxxxx1
86
86
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>绘制文本 - a_filltext_example | Web176教程www.web176.com</title>6
<meta name="robots" content="noindex, nofollow">7
<style>8
body {9
padding: 0;10
margin: 0;11
}12
13
svg:not(:root) {14
display: block;15
}16
17
.playable-code {18
background-color: #f4f7f8;19
border: none;20
border-left: 6px solid #558abb;21
border-width: medium medium medium 6px;22
color: #4d4e53;23
height: 100px;24
width: 90%;25
padding: 10px 10px 0;26
}27
28
.playable-canvas {29
border: 1px solid #4d4e53;30
border-radius: 2px;31
}32
33
.playable-buttons {34
text-align: right;35
width: 90%;36
padding: 5px 10px 5px 26px;37
}38
</style>39
40
41
</head>42
<body>43
44
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>45
<div class="playable-buttons">46
<input id="edit" type="button" value="Edit" />47
<input id="reset" type="button" value="Reset" />48
</div>49
<textarea id="code" class="playable-code">50
ctx.font = "48px serif";51
ctx.textBaseline = "hanging";52
ctx.strokeText("Hello Web176教程", 0, 100);</textarea> 53
54
<script>55
var canvas = document.getElementById("canvas");56
var ctx = canvas.getContext("2d");57
var textarea = document.getElementById("code");58
var reset = document.getElementById("reset");59
var edit = document.getElementById("edit");60
var code = textarea.value;61
62
ctx.font = "48px serif";63
ctx.textBaseline = "hanging";64
ctx.strokeText("Hello Web176教程", 0, 100);65
66
function drawCanvas() {67
ctx.clearRect(0, 0, canvas.width, canvas.height);68
eval(textarea.value);69
}70
71
reset.addEventListener("click", function() {72
textarea.value = code;73
drawCanvas();74
});75
76
edit.addEventListener("click", function() {77
textarea.focus();78
})79
80
textarea.addEventListener("input", drawCanvas);81
window.addEventListener("load", drawCanvas);82
83
</script>84
85
</body>86
</html>预测量文本宽度
当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。
measureText()
将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
下面的代码段将展示如何测量文本来获得它的宽度：
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}Geoko 特性说明
在 Geoko（Firefox，Firefox OS 及基于 Mozilla 的应用的渲染引擎）中，曾有一些版本较早的 API 实现了在 canvas 上对文本作画的功能，但它们现在已不再使用。
阅读剩余 90%
作者：terry，如若转载，请注明出处：https://www.web176.com/canvas/7653.html
支付宝 
微信 