Fabric.js 是一个可以简化 Canvas 程序编写的库。Fabric.js 为 Canvas 提供所缺少的对象模型、svg parser、交互和一整套其他不可或缺的工具。本文演示如何在 Vue.js 项目中引入并使用 Fabric.js 库。

（1）首先进入项目文件夹，执行如下命令进行安装：

npm install fabric

import fabric from 'fabric'
Vue.use(fabric);

（1）下面代码在画布上绘制一个红色矩形。

<template>
  <div>
    <canvas id="canvas" width="300" height="200"></canvas>
  </div>
</template>
 
<script>
export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods:{  
  },
  mounted() {
    var canvas = new fabric.Canvas('canvas');
    var rect = new fabric.Rect({
        top : 50,
        left : 100,
        width : 100,
        height : 70,
        fill : 'red'
    });
    canvas.add(rect);
  }
}
</script>

<style scoped>
  canvas {
      border: 1px dashed black;
  }
</style>

（2）运行结果如下：