Canvas怎么使文本垂直排列？

图形开发canvashtml5

示例效果与源代码：

运行效果

在HTML5的Canvas中，要使文字垂直排列，您可以使用Canvas的rotate方法，并结合translate方法，先将坐标原点移到文本的基线位置，然后旋转整个Canvas，使文本与y轴平行，最后再移动坐标原点回到原来的位置。以下是一个示例代码：

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
<!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.font = "30px Arial";

// 绘制垂直文本
ctx.save();
ctx.translate(100, 100); // 移动坐标原点到文本的基线位置
ctx.rotate(-90 * Math.PI / 180); // 旋转Canvas 90度（逆时针）
ctx.fillText("Hello, world!", 0, 0); // 绘制文本，由于之前已经旋转了Canvas，文本会垂直排列
ctx.restore(); // 恢复Canvas的状态
</script>

</body>
</html>

在上述代码中，我们首先获取了Canvas的上下文，然后设置了字体大小和样式。接着，我们使用save方法保存了当前Canvas的状态，然后使用translate方法将坐标原点移动到文本的基线位置（在这个例子中是(100, 100)）。然后，我们使用rotate方法旋转整个Canvas，使文本与y轴平行。最后，我们使用fillText方法在Canvas上绘制文本。在绘制完文本后，我们使用restore方法恢复了Canvas的状态。这样，文本就会垂直排列了。

上一篇：Canvas如何绘制空心文字？

下一篇：时钟动画Canvas代码怎么实现？