在Canvas画布上如何实现按文字旋转方式垂直排列？

图形开发canvashtml5

运行效果

正常文字是从左往右水平排列，通过将文字按顺时针旋转90度或按逆时针旋转90度，由水平变排列成了垂直排列，这种方式比较适合设计场景中，例如一些海报、广告或艺术作品中，垂直排列的文字能够突出主题，吸引观众的注意力。
该方式可通过Canvas提供的rotate()方法旋转画布的方式来实现。按文字旋转方式垂直排列的实现过程如下，首先设置字体属性和文字内容，然后使用translate()方法平移，接着使用rotate()方法旋转90度，最后绘制文字。

以下是一个网页示例，展示了如何在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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>

<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="overflow: hidden; margin:10px;">
    <canvas id="canvas" width="220" height="300"style="border:solid 1px #CCCCCC; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);" />
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');

    // 设置字体属性
    ctx.font = "30px 黑体";
    let text = "图形开发学院";

    // 绘制文本1
    ctx.save();
    ctx.translate(50, 50);
    ctx.rotate(90 * Math.PI / 180);
    ctx.fillText(text, 0, 0);
    let textWidth = ctx.measureText(text).width;
    ctx.restore();

    // 绘制文本2
    ctx.save();
    ctx.translate(150, 50 + textWidth);
    ctx.rotate(-90 * Math.PI / 180);
    ctx.fillText(text, 0, 0);
    ctx.restore();

    // 绘制坐标点
    ctx.beginPath();
    ctx.arc(50, 50, 4, 0, 2 * Math.PI);
    ctx.arc(150, 50 + textWidth, 4, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
</script>

</html>

在这个示例中，我们首先定义了一个Canvas元素，并设置了其宽度和高度。然后，通过JavaScript中canvas.getContext()方法获取从画板中获取“2D渲染上下文”对象。
接下来通过文字旋转，实现文字垂直排列效果。
首先使用font属性设置字体属性，如字体大小设置为30px；字体设置为黑体。
接着，设置文字内容。然后，使用translate()方法将画布平移，
接着，使用translate方法将画布旋转90度。最后，使用fillText()方法绘制文字。

上一篇：在Canvas画布上如何实现按中文古典方式垂直排列？

下一篇：求助在Canvas画布上如何测量文字宽度？