Canvas API 中绘制文字的方法是什么？

图形开发canvashtml5

运行效果

Canvas API 中提供了fillText()方法用来绘制填充的文字，strokeText()方法来用来绘制带边框的文字，例如图中的填充的文字和带边框的文字。这两个方法的参数是一致的，都是3个参数，分别是，要绘制的文字；文字的x坐标，文字的y坐标，文字的最大宽度;
文字的最大宽度这个参数为可选，超过最大宽度时，绘制的文字会根据宽度缩小。

以下是一个网页示例，展示了如何在Canvas上绘制文字

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <title>绘制文字</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,anygraph,javascript,图形">
</head>

<body style="margin:10px;">
    <canvas id="canvas" width="800" height="280" style="border:solid 1px #CCCCCC; "></canvas>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');

    // 设置字体属性
    ctx.font ="40px 黑体";
    // 绘制填充的文字
    ctx.fillText("你好，中国", 50, 100);
	// 绘制空心的文字
    ctx.strokeText("你好，中国", 50, 200);
</script>

</html>

在这个示例中，我们首先定义了一个Canvas元素，并设置了其宽度和高度。然后，通过JavaScript中canvas.getContext()方法获取从画板中获取“2D渲染上下文”对象。
接下来，我们绘制填充的文字。首先使用canvas提供的filtext()方法绘制填充的文字，其参数，文字内容设置为“你好，中国”；文字的x坐标设置为50；文字的y坐标设置为100。这时，“你好，中国”的文字被绘制到画布上。
但是字体比较小，这是因为Canvas的默认文本字号为10px。
我们可以使用font属性来设置字体属性，如字体大小设置为40px；字号设置为黑体。

上一篇：求解JavaScript中鼠标点击事件示例

下一篇：在Canvas画布上如何绘制出形态各异的椭圆图形？