使用fabricjs实现竖排文字|极客教程

使用fabricjs实现竖排文字

在网页开发中，有时候我们需要实现竖排文字的效果，比如在海报设计、广告制作等场景中。本文将介绍如何使用fabricjs库来实现竖排文字效果。

准备工作

在开始之前，我们需要引入fabricjs库。可以通过CDN引入，也可以下载到本地使用。在本文中，我们将使用CDN引入的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>

创建Canvas和Text对象

首先，我们需要创建一个Canvas对象和一个Text对象，然后将Text对象添加到Canvas中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');

const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们创建了一个Canvas对象，并在Canvas中添加了一个Text对象。通过设置Text对象的angle属性为-90，实现了竖排文字的效果。

设置文字样式

我们可以通过设置Text对象的属性来调整文字的样式，比如字体、颜色、对齐方式等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的fontFamily属性为Arial，fill属性为红色，textAlign属性为居中对齐。

动态修改文字内容

我们可以通过修改Text对象的text属性来动态改变文字内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center'
});

canvas.add(text);

text.set('text', 'Welcome to geek-docs.com');
canvas.renderAll();
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们首先创建了一个Text对象，并将其添加到Canvas中。然后通过set方法修改了Text对象的text属性，最后调用renderAll方法重新渲染Canvas。

设置文字间距

我们可以通过设置Text对象的lineHeight属性来调整文字的行高，从而实现文字间距的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    lineHeight: 30
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的lineHeight属性为30，实现了文字间距为30px的效果。

设置文字旋转中心

我们可以通过设置Text对象的originX和originY属性来调整文字的旋转中心。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    originX: 'center',
    originY: 'center'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的originX和originY属性为center，实现了文字以中心点为旋转中心的效果。

设置文字边框

我们可以通过设置Text对象的stroke和strokeWidth属性来给文字添加边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    stroke: 'black',
    strokeWidth: 2
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的stroke属性为黑色，strokeWidth属性为2，实现了给文字添加黑色边框的效果。

设置文字阴影

我们可以通过设置Text对象的shadow属性来给文字添加阴影效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    shadow: 'rgba(0,0,0,0.5) 2px 2px 5px'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的shadow属性为rgba(0,0,0,0.5) 2px 2px 5px，实现了给文字添加阴影效果。

设置文字透明度

我们可以通过设置Text对象的opacity属性来调整文字的透明度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    opacity: 0.5
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的opacity属性为0.5，实现了文字透明度为50%的效果。

设置文字背景色

我们可以通过设置Text对象的backgroundColor属性来给文字添加背景色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    backgroundColor: 'yellow'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的backgroundColor属性为黄色，实现了给文字添加黄色背景色的效果。

设置文字边框圆角

我们可以通过设置Text对象的cornerSize属性来调整文字边框的圆角大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    cornerSize: 10
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的cornerSize属性为10，实现了文字边框圆角大小为10px的效果。

设置文字斜体

我们可以通过设置Text对象的fontStyle属性为italic来给文字添加斜体效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    fontStyle: 'italic'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的fontStyle属性为italic，实现了给文字添加斜体效果。

设置文字粗体

我们可以通过设置Text对象的fontWeight属性为bold来给文字添加粗体效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    fontWeight: 'bold'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的fontWeight属性为bold，实现了给文字添加粗体效果。

设置文字下划线

我们可以通过设置Text对象的textDecoration属性为underline来给文字添加下划线效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    textDecoration: 'underline'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的textDecoration属性为underline，实现了给文字添加下划线效果。

设置文字删除线

我们可以通过设置Text对象的textDecoration属性为line-through来给文字添加删除线效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    textDecoration: 'line-through'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的textDecoration属性为line-through，实现了给文字添加删除线效果。

设置文字间距

我们可以通过设置Text对象的charSpacing属性来调整文字的间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    charSpacing: 5
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的charSpacing属性为5，实现了文字间距为5px的效果。

设置文字换行

我们可以通过设置Text对象的splitByGrapheme属性为true来实现文字的自动换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    splitByGrapheme: true
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的splitByGrapheme属性为true，实现了文字的自动换行效果。

设置文字超出部分隐藏

我们可以通过设置Text对象的clipTo属性来实现文字超出部分的隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    clipTo: function(ctx) {
        ctx.rect(0, 0, 100, 100);
    }
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的clipTo属性为一个函数，函数内部通过ctx.rect方法定义了一个裁剪区域，实现了文字超出部分的隐藏效果。

设置文字填充样式

我们可以通过设置Text对象的fill属性为一个渐变对象来实现文字的填充样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    textAlign: 'center',
    fill: new fabric.Gradient({
        type: 'linear',
        colorStops: [
            { offset: 0, color: 'red' },
            { offset: 1, color: 'blue' }
        ]
    })
});

canvas.add(text);
</script>
</body>
</html>

在上面的代码中，我们设置了Text对象的fill属性为一个渐变对象，实现了文字填充为红蓝渐变色的效果。

设置文字描边样式

我们可以通过设置Text对象的stroke属性为一个渐变对象来实现文字的描边样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 250,
    fontSize: 20,
    angle: -90,
    fontFamily: 'Arial',
    textAlign: 'center',
    stroke: new fabric.Gradient({
        type: 'linear',
        colorStops: [
            { offset: 0, color: 'red' },
            { offset: 1, color: 'blue' }
        ]
    }),
    strokeWidth: 2
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的stroke属性为一个渐变对象，实现了文字描边为红蓝渐变色的效果，并设置了strokeWidth属性为2。

设置文字旋转角度

我们可以通过设置Text对象的angle属性来调整文字的旋转角度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 50,
    fontSize: 20,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    angle: 45
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的angle属性为45，实现了文字旋转45度的效果。

设置文字缩放

我们可以通过设置Text对象的scaleX和scaleY属性来调整文字的缩放比例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 50,
    fontSize: 20,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    scaleX: 2,
    scaleY: 0.5
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的scaleX属性为2，scaleY属性为0.5，实现了文字水平方向放大2倍，垂直方向缩小一半的效果。

设置文字倾斜角度

我们可以通过设置Text对象的skewX和skewY属性来调整文字的倾斜角度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 50,
    fontSize: 20,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    skewX: 10,
    skewY: -5
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的skewX属性为10，skewY属性为-5，实现了文字水平方向倾斜10度，垂直方向倾斜5度的效果。

设置文字阴影

我们可以通过设置Text对象的shadow属性来给文字添加阴影效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 50,
    fontSize: 20,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    shadow: 'rgba(0,0,0,0.5) 2px 2px 5px'
});

canvas.add(text);
</script>
</body>
</html>

代码运行结果:

使用fabricjs实现竖排文字

在上面的代码中，我们设置了Text对象的shadow属性为一个阴影样式，实现了文字添加黑色阴影，阴影偏移量为(2px, 2px)，模糊半径为5px的效果。

设置文字透明度

我们可以通过设置Text对象的opacity属性来调整文字的透明度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS Vertical Text</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, geek-docs.com', {
    left: 50,
    top: 50,
    fontSize: 20,
    fontFamily: 'Arial',
    fill: 'red',
    textAlign: 'center',
    opacity: 0.5
});

canvas.add(text);
</script>
</body>
</html>