fabric.js基础使用

1.正方形

javascript 复制代码
<!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.圆形,三角形

javascript 复制代码
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.图片属性(有水印功能,其实就是添加文字上去)

javascript 复制代码
<!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.路径画多边形

javascript 复制代码
<!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>
相关推荐
Hello.Reader21 分钟前
NGINX 的 ngx_http_auth_jwt_module模块
运维·nginx·http
ephemerals__25 分钟前
【Linux】进程控制
linux·运维·服务器
程序猿不脱发21 小时前
什么是负载均衡?NGINX是如何实现负载均衡的?
运维·nginx·负载均衡
一匹电信狗1 小时前
【Linux我做主】进度条小程序深度解析
linux·运维·服务器·c++·ubuntu·小程序·unix
李q华1 小时前
关于浏览器页面自动化操作
运维·自动化
解道Jdon2 小时前
Redis宣布再次开源
javascript·reactjs
一只码代码的章鱼2 小时前
linux-文件操作
linux·运维·服务器
豆芽脚脚4 小时前
Auto.js 脚本:清理手机数据但保留账号
开发语言·javascript·智能手机·autojs
吴声子夜歌4 小时前
Linux运维——Vim技巧二
linux·运维·vim
羑悻的小杀马特6 小时前
【Linux篇章】Linux 进程信号1:解锁系统高效运作的 “隐藏指令”,开启性能飞跃新征程(精讲信号产生和保存)
linux·运维·服务器·学习·操作系统·进程信号