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>
相关推荐
岚天start14 小时前
Linux内核coredump分析方案
linux·运维·服务器·gdb·coredump·堆栈·内存快照
不一样的少年_14 小时前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
阿奇__14 小时前
el-table默认排序设置
前端·javascript·vue.js
屁股割了还要学14 小时前
【Linux入门】常用工具:yum、vim
linux·运维·服务器·c语言·c++·学习·考研
云计算练习生14 小时前
linux shell编程实战 03 数组:批量处理数据
linux·运维·服务器·数组·shell编程
Jm_洋洋14 小时前
【Linux系统编程】程序替换:execve(execl、execlp、execle、execv、execvp、execvpe)
linux·运维·c语言·开发语言·程序人生
郑板桥3015 小时前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm
JinSoooo15 小时前
pnpm monorepo 联调:告别 --global 参数
开发语言·javascript·ecmascript·pnpm
郝学胜-神的一滴16 小时前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
橘颂TA16 小时前
【Linux】 层层递进,抽丝剥茧:调度队列、命令行参数、环境变量
linux·运维·服务器·c/c++