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>
相关推荐
云泽8084 分钟前
Linux 入门指南:从零掌握基础文件与目录操作命令
linux·运维·服务器
心灵宝贝31 分钟前
unzip-6.0-21.el7.x86_64.rpm怎么安装?CentOS 7手动安装rpm包详细步骤
linux·运维·centos
silent_missile43 分钟前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
Lin_Aries_04211 小时前
基于 CI/CD 平台将应用程序自动部署到 Kubernetes 集群
运维·ci/cd·docker·云原生·容器·kubernetes·jenkins
你的人类朋友1 小时前
DevOps是什么?
运维·自动化运维·devops
克里斯蒂亚诺更新2 小时前
微信小程序app.js中每30秒调用一次wx.getLocation
javascript·微信小程序·小程序
鄃鳕2 小时前
C++坑系列,C++ std::atomic 拷贝构造函数问题分析与解决方案
java·javascript·c++
励志不掉头发的内向程序员2 小时前
【Linux系列】并发世界的基石:透彻理解 Linux 进程 — 进程概念
linux·运维·服务器·开发语言·学习
Never_Satisfied3 小时前
在JavaScript / HTML中,实现`<iframe>` 自适应高度
开发语言·javascript·html
早起的年轻人4 小时前
CentOS 8系统盘大文件查找方法
linux·运维·centos