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>
相关推荐
!chen6 分钟前
基于element-UI 实现下拉框滚动翻页查询通用组件
javascript·vue.js·ui
阔跃生物24 分钟前
单细胞注释前沿:CASSIA——无参考、可解释、自动化细胞注释的大语言模型
运维·语言模型·自动化
孙克旭_1 小时前
day024-网络基础-TCP与UDP、DNS
linux·运维·网络·网络协议·tcp/ip·udp
板鸭〈小号〉1 小时前
进程间通信及管道(理论)
运维·服务器
regedit801 小时前
Centos7升级openssl
linux·运维·服务器
sorryhc1 小时前
钉钉红包性能优化之路
前端·javascript·性能优化
bigdata-rookie2 小时前
kafka SASL/PLAIN 认证及 ACL 权限控制
大数据·运维·服务器·分布式·zookeeper·kafka
藥瓿亭2 小时前
2024 CKA模拟系统制作 | Step-By-Step | 18、题目搭建-备份还原Etcd
linux·运维·服务器·ubuntu·kubernetes·etcd·cka
angushine2 小时前
Docker设置代理
运维·docker·容器
伤不起bb3 小时前
负载均衡群集---Haproxy
运维·负载均衡·lvs