章节索引 :

文本绘制

1. 前言

canvas 中不光是绘制一些图案,有时候我们还需要对文字进行绘制,本小节我们就学习 canvas 中如何绘制文本。

2. 绘制文本

在 canvas 的 API 中已经封装了绘制文本的方法:fillText,我们可以直接调用使用。

先看一个案例:

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		ctx.fillText("慕课Wiki", 20, 20) //绘制文本
	
	</script>
<body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果:

上面我们就绘制了一行文本,但是我们可以发现,这个字很小,如果我们想自定义字体样式,那就需要用到设置字体属性:font 了,在 canvas 中使用 font 和 CSS font 规范相同。

看一个案例:

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		ctx.fillStyle = "#456795"
		ctx.font="60px  Microsoft YaHei"  //设置字体样式
		ctx.fillText("慕课Wiki", 20, 100)  //绘制文本
	
	</script>
<body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果:

这样我们就绘制了 60px 的微软雅黑文字。

3. 方法整理

本小节中我们使用到一个新的方法,fillText

3.1 fillText()方法

fillText 方法作用是绘制一行文字。

语法:

void ctx.fillText(text, x, y [, maxWidth]);

变量说明

变量名 类型 是否必须 说明
text String 要绘制的文本。
x Number 文本起始点的 x 轴坐标。
y Number 文本起始点的 y 轴坐标。
maxWidth Number 可选,需要绘制的最大宽度。如果指定了值,并且经过计算字符串的宽度比最大宽度还要宽,字体为了适应会使用一个水平缩小的字体或者小号的字体。

4. 属性整理

本小节中我们使用到一个新的属性,它就是 font,此属性和 CSS 的 font 属性值相同。

4.1 font 属性

font 属性作用是设置绘制文本的样式。

变量说明:

属性名 类型 说明
font String 符合 CSS font 语法的字符串,默认字体是 10px sans-serif

5. 总结

本小节我们主要学习了利用 fillText 方法绘制一行文本,利用 font 设置绘制文本的样式。下一小节我们将学习如何绘制空心文本。