文本背景 fabricjs - Javascript

在使用fabric.js创建画布时，我们可以使用fabric.Text类来添加文本到画布上。这里介绍如何为文本添加背景颜色。

步骤

1. 创建Canvas

   var canvas = new fabric.Canvas("canvas");
   

2. 创建文本对象并设置样式

   var text = new fabric.Text("Hello World", {
     fontSize: 50,
     fontFamily: "Arial",
     left: 100,
     top: 100,
   });
   

3. 创建矩形对象并设置样式（作为文本的背景）

   var rect = new fabric.Rect({
     left: text.left,
     top: text.top,
     width: text.width,
     height: text.height,
     fill: "yellow",
     opacity: 0.5,
   });
   

4. 将文本对象和矩形对象添加到画布上

   canvas.add(rect, text);
   

示例

以下是一个完整的示例，向画布上添加文本并为其添加背景：

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<script>
  var canvas = new fabric.Canvas("canvas");

  var text = new fabric.Text("Hello World", {
    fontSize: 50,
    fontFamily: "Arial",
    left: 100,
    top: 100,
  });

  var rect = new fabric.Rect({
    left: text.left,
    top: text.top,
    width: text.width,
    height: text.height,
    fill: "yellow",
    opacity: 0.5,
  });

  canvas.add(rect, text);
</script>

结论

通过使用fabric.js和以上简单步骤，我们可以很容易地为文本添加背景颜色。此外，我们还可以设置背景的不透明度、填充颜色等属性，以便满足更多需求。