使用FabricJS创建画布
FabricJS是一个利用JavaScript开发的使用HTML5 Canvas元素的库，可用于创建高质量且交互性强的图像，它可以让开发者在网页上直接使用Canvas绘图，并提供了很多实用的API来帮助我们快速的实现自己所想要的功能。在这篇文章中，我们将详细介绍如何使用FabricJS来创建画布。
1. 引入FabricJS库
在使用FabricJS之前，我们需要先将其引入到我们的项目中。可以直接下载 FabricJS 库，然后将其添加到页面中。我们也可以通过CDN引入FabricJS库。这里我们选择第二种方式，因为这样可以使我们的代码更加简洁。
//引入FabricJS库
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js" integrity="sha512-VdeuTjGiMEdmhF6zLJtREt0qSCl2jODTr+1zMT4ZYX9No/w3btxJ5Svyv8viG50zn9Wn5TlW6ofqDJT6JJJmgQ==" crossorigin="anonymous"></script>
2. 创建画布
创建画布可以使用FabricJS中的canvas对象。在页面中添加 canvas 元素，并建立 FabricJS 的实例。可以指定画布的大小和其它属性。
//获取页面画布对象
var myCanvas = new fabric.Canvas('myCanvas', {
width: 800, //画布宽度
height: 600, //画布高度
backgroundColor: '#ccc', //画布背景颜色
selectionBorderColor: 'blue', //选择框颜色
selectionLineWidth: 2, //选择框宽度
defaultCursor: 'default', // 默认鼠标指针样式
hoverCursor: 'pointer' // 悬浮鼠标指针样式
});
3. 绘制元素
接下来我们就可以开始在画布上绘制元素了。 FabricJS 具有很多工具，可以让我们以各种形状和大小来创建直线，文本，图形等等。先创建几个不同种类的图形来演示一下。
3.1 绘制矩形
在 FabricJS 中，我们可以使用 Rectangle 类来创建矩形。Rectangle 类的构造函数可以接受许多选项来定义此矩形的大小、位置和颜色等属性。
//绘制矩形
var rect = new fabric.Rect({
left: 100, //属性：绘制距离画布左侧的距离
top: 100, //属性：绘制距离画布顶部的距离
fill: 'red', //属性：填充色，默认为空
width: 200, //属性：宽度
height: 100, //属性：高度
angle: 45, //属性：旋转角度
strokeWidth: 2, //属性：线条宽度
stroke: 'green', //属性：线条颜色
opacity: 0.5 //属性：透明度
});
myCanvas.add(rect); //添加到canvas中
3.2 绘制文本
在 FabricJS 中，我们可以使用 Text 类来创建文本。Text 类的构造函数可以接受许多选项来定义此文本的字体、大小、颜色等属性。
//绘制文本
var text = new fabric.Text('Hello FabricJS', {
left: 100,
top: 250,
fontFamily: 'Arial', //属性：字体
fontSize: 30, //属性：字体大小
fill: 'black', //属性：填充颜色
fontStyle: 'italic' //属性：字体样式
});
myCanvas.add(text); //添加到canvas中
3.3 绘制圆形
在 FabricJS 中，我们可以使用 Circle 类来创建圆形。Circle 类的构造函数可以接受许多选项来定义此圆形的半径、位置和颜色等属性。
//绘制圆形
var circle = new fabric.Circle({
left: 100,
top: 400,
strokeWidth: 2, //属性：线条宽度
radius: 50, //属性：半径
fill: null, //属性：填充颜色
stroke: 'blue' //属性：线条颜色
});
myCanvas.add(circle); //添加到canvas中
4. 动画
绘制了我们想要的图形，下面就可以为这些图形添加一些动画了。 FabricJS 可以使对象实现移动、旋转、缩放等动画效果。直观效果十分吸引人。
4.1 移动动画
在 FabricJS 中，可以使用 animate 方法，该方法有两个参数：一个是JSON对象，该对象描述了要执行的动画类型和选项，第二个参数是回调函数，该函数将在动画完成时执行。为了使矩形能够左右移动，我们可以将矩形从左侧移动到最右侧，然后从右侧移动到最左侧。这需要改变其 left 属性。并使用 animate 方法，在样式更改时使用 FabricJS 缓动函数。
var rect = new fabric.Rect({
left: 0,
top: 0,
width: 50,
height: 50,
fill: '#0aa',
});
myCanvas.add(rect);
//移动矩形
rect.animate('left', 350, {
onChange: myCanvas.renderAll.bind(myCanvas),
duration: 3000,
easing: fabric.util.ease.easeInOutCubic,
onComplete: function() {
rect.animate('left', 0, {
onChange: myCanvas.renderAll.bind(myCanvas),
duration: 3000,
easing: fabric.util.ease.easeInOutCubic,
onComplete: function() {
//完成后执行的操作
}
});
}
});
4.2 缩放动画
在 FabricJS 中，可以使用 animate 方法，该方法有两个参数：一个是JSON对象，该对象描述了要执行的动画类型和选项，第二个参数是回调函数，该函数将在动画完成时执行。为了使矩形能够放大和缩小，我们可以使用缩放属性来更改其大小并使用 FabricJS animate 方法中的 duration 属性和缓动函数来实现缩放动画。
//缩放矩形
rect.animate('scaleX', 2, {
onChange: myCanvas.renderAll.bind(myCanvas),
duration: 3000,
easing: fabric.util.ease.easeInOutCubic,
onComplete: function() {
rect.animate('scaleX', 1, {
onChange: myCanvas.renderAll.bind(myCanvas),
duration: 3000,
easing: fabric.util.ease.easeInOutCubic,
onComplete: function() {
//完成后执行的操作
}
});
}
});
4.3 旋转动画
在 FabricJS 中，可以使用 animate 方法，该方法有两个参数：一个是JSON对象，该对象描述了要执行的动画类型和选项，第二个参数是回调函数，该函数将在动画完成时执行。为了使圆形能够旋转，我们可以使用旋转属性并使用 FabricJS animate 方法中的 duration 属性和缓动函数来实现旋转动画。
//旋转圆形
circle.animate('angle', 360, {
onChange: myCanvas.renderAll.bind(myCanvas),
duration: 3000,
easing: fabric.util.ease.easeInOutCubic,
onComplete: function() {
circle.animate('angle', 0, {
onChange: myCanvas.renderAll.bind(myCanvas),
duration: 3000,
easing: fabric.util.ease.easeInOutCubic,
onComplete: function() {
//完成后执行的操作
}
});
}
});
5. 总结
在本文中，我们详细介绍了如何使用 FabricJS 来创建画布、绘制元素和实现动画效果。FabricJS 是一款非常优秀的绘图库，它提供非常方便的API接口，使得我们可以轻松地开发出高交互性的网页图像。相信通过本文的学习，你已经能够熟练掌握 FabricJS 的基本用法，以及如何使用 FabricJS 来创建画布、绘制元素和实现动画效果。