Canvas如何绘制文字？

图形开发canvashtml5

示例效果与源代码：

运行效果

在HTML5的Canvas中，我们可以使用fillText()方法来绘制文字。以下是一个简单的示例，说明如何在Canvas上绘制文字：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制文字
ctx.fillStyle = "red";  // 设置文字颜色
ctx.font = "20px Arial";  // 设置字体大小和类型
ctx.fillText("Hello World", 10, 50);  // 在(10,50)的位置绘制文字
</script>

</body>
</html>

在上述代码中，我们首先获取了canvas元素，然后通过getContext('2d')获取了2D渲染上下文。然后，我们设置了文字的颜色、字体大小和类型，最后使用fillText()方法在指定的位置绘制了文字。

注意，fillText()方法的第一个参数是你想要绘制的文字，第二个参数和第三个参数是文字开始绘制的x和y坐标。在Canvas的坐标系统中，(0,0)是左上角，x轴向右增加，y轴向下增加。

尝试一下 »

上一篇：Canvas如何实现绘制广东省地图轮廓的功能？

下一篇：水平翻转、垂直翻转Canvas怎么实现？