fabric操作canvas绘图-动画

在Fabric.js中，我们可以使用内置的动画功能来实现画布上的对象的动态效果。以下是一个简单的例子，展示如何为矩形添加动画效果：

// 引入Fabric.js库
const fabric = require('fabric').fabric;
 
// 创建一个画布实例
const canvas = new fabric.Canvas('c');
 
// 创建一个矩形对象
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 100,
  height: 100
});
 
// 将矩形添加到画布上
canvas.add(rect);
 
// 动画函数，更新矩形的位置
function animateRect() {
  rect.set({
    left: rect.left + 10, // 更新左边界位置
  });
 
  // 如果矩形的左边界超出了画布的宽度，重置位置
  if (rect.left > canvas.width) {
    rect.set({
      left: 0,
    });
  }
 
  // 请求下一帧动画
  canvas.requestRenderAll();
 
  // 递归调用动画函数，实现连续动画
  canvas.animate('left', animateRect);
}
 
// 开始动画
animateRect();

在这个例子中，我们创建了一个矩形对象，并将其添加到画布上。然后我们定义了一个animateRect函数，这个函数更新矩形的左边界位置，并且如果矩形移动出画布范围，它将被重置回初始位置。最后，我们调用animateRect函数开始连续的动画循环。

注意：这个例子假设你已经在HTML中有一个<canvas id="c"></canvas>元素。此外，你需要先安装Fabric.js库，然后才能使用require语句来引入它。