HTML5 Canvas 教程：八、文字

最新推荐文章于 2024-09-11 21:35:21 发布

司码君

最新推荐文章于 2024-09-11 21:35:21 发布

阅读量1.9k

点赞数

文章标签： HTML5 Canvas

八、文字 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>

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>

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>

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>

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>

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>

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>

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);

其作用是输出宽度未达到行宽度的文本。