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>
