fabric.js基础使用

原创于 2025-04-08 14:26:38 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fabric #javascript #运维

前端基础专栏收录该内容

37 篇文章

订阅专栏

1.正方形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabric.js Watermark Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
    <style>
      #canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
      // 初始化 Fabric.js Canvas
      var canvas = new fabric.Canvas("canvas");
      var rect = new fabric.Rect({
        left: 100, // 靠左距离
        top: 100, // 靠右距离
        fill: "red", // 填充颜色
        width: 30, // 宽度
        height: 30, // 高度
      });
      canvas.add(rect);
      console.log("666", canvas);
    </script>
  </body>
</html>

2.圆形，三角形

var rect = new fabric.Rect({
        left: 100, // 靠左距离
        top: 100, // 靠右距离
        fill: "red", // 填充颜色
        width: 30, // 宽度
        height: 30, // 高度
      });
      // 圆形
      var circle = new fabric.Circle({
        radius: 50,
        fill: "green",
        left: 200,
        height: 200,
      });
      // 三角形
      var triangle = new fabric.Triangle({
        fill: "blue",
        width: 80,
        top: 300,
        left: 200,
        height: 200,
      });
      canvas.add(rect);
      canvas.add(circle);
      canvas.add(triangle);

3.图片属性(有水印功能，其实就是添加文字上去)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabric.js Watermark Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
    <style>
      #canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <img
      src="./123/10dfa9ec8a13632762d035b5c1dcb7ec08fa503d69a3.jpg"
      id="img1"
    />
    <script>
      // 初始化 Fabric.js Canvas
      var canvas = new fabric.Canvas("canvas");
      // 加载图片
      fabric.Image.fromURL(
        "./123/10dfa9ec8a13632762d035b5c1dcb7ec08fa503d69a3.jpg",
        function (img) {
          // 设置图片大小和位置（可选）
          img.scaleToWidth(600);
          img.scaleToHeight(600);
          img.angle = 5;
          console.log("img", img);

          // 将图片添加到 Canvas
          canvas.add(img);

          //   // 添加水印文本
          var watermarkText = new fabric.Text("水印", {
            left: 350,
            top: 350,
            fill: "rgba(1, 255, 255, 0.5)", // 半透明白色
            fontSize: 36,
            fontFamily: "Arial",
            angle: -30, // 倾斜角度
          });

          //   // 将水印文本添加到 Canvas
          canvas.add(watermarkText);

          // 渲染 Canvas（Fabric.js 会自动处理，但明确调用也没问题）
          canvas.renderAll();
        }
      );
    </script>
  </body>
</html>

4.路径画多边形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabric.js Watermark Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
    <style>
      #canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
      // 初始化 Fabric.js Canvas
      var canvas = new fabric.Canvas("canvas");
      // M 开始的点 L 中间点 200 200 L 170 200 第三个点 ... z闭合
      var path = new fabric.Path("M 0 0 L 200 200 L 170 200 L 20 170 z");
      path.set({
        left: 120,
        top: 120,
        fill: "red",
      });
      canvas.add(path);
    </script>
  </body>
</html>