场景

Fabricjs一个简单强大的Canvas绘图库快速入门：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122850075

在上面的基础上，可以实现在画布上添加对象，如果需要组合对象，并设置组合对象的功能属性可以

使用new fabric.Group():接受两个参数。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、官方教程

http://fabricjs.com/fabric-intro-part-3#groups

2、绘制圆形、绘制文本并组合

      //绘制圆形
      var circle = new fabric.Circle({
        radius: 100,
        fill: '#f00',
        scaleY: 0.5,
        originX: 'center', //调整中心点的X轴坐标
        originY: 'center' //调整中心点的Y轴坐标
      });
      //绘制文本
      var text = new fabric.Text('公众号:霸道的程序猿', {
        fontSize: 20,
        originX: 'center',
        originY: 'center'
      })
      //进行组合
      var group = new fabric.Group([circle, text], {
        left: 350,
        top: 200,
        angle: 10
      })
      canvas.add(group);

3、完整示例代码