Fabric.js v4.4.0 实现画笔、文本、直线及椭圆等绘制的示例代码。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FabricJS</title>
<style>
.fabric-toolbar {
width: 720px;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 1;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: repeat(7, 1fr);
border: 1px solid black;
grid-gap: 10px;
background-color: black;
}
.fabric-toolbar > div {
background-color: white;
padding: 15px;
text-align: center;
}
.fabric-toolbar__tool {
cursor: pointer;
}
</style>
</head>
<body>
<div class="fabric-toolbar">
<div class="fabric-toolbar__tool js-mode" data-mode="draw">
画笔
</div>
<div class="fabric-toolbar__tool js-mode" data-mode="text">
文本
</div>
<div class="fabric-toolbar__tool js-mode" data-mode="line">
直线
</div>
<div class="fabric-toolbar__tool js-mode" data-mode="ellipse">
椭圆
</div>
<div class="fabric-toolbar__tool js-mode" data-mode="rect">
矩形
</div>
<div class="fabric-toolbar__tool js-mode" data-mode="eraser">
像皮擦
</div>
<div id="js-undo" class="fabric-toolbar__tool">上一步</div>
<div>
<input type="radio" name="width" data-value="6" checked>6px
</div>
<div><input type="radio" name="width" data-value="10">10px</div>
<div><input type="radio" name="width" data-value="14">14px</div>
<div style="background-color: #e74c3c;">
<input type="radio" name="color" data-value="#e74c3c" checked>
</div>
<div style="background-color: #2ecc71;">
<input type="radio" name="color" data-value="#2ecc71">
</div>
<div style="background-color: #3498db;">
<input type="radio" name="color" data-value="#3498db">
</div>
<div style="background-color: #e67e22;">
<input type="radio" name="color" data-value="#e67e22">
</div>
</div>
<canvas id="js-canvas"></canvas>
<script src="fabric.min.js"></script>
<script src="index.js" type="module"></script>
</body>
</html>