基础图形

矩形

var rect = new fabric.Rect({
  left:100, // 距离画布左侧的距离,单位是像素
  top:100, // 距离画布上边的距离
  fill:'red', // 填充的颜色
  width:30, // 方形的宽度
  height:30 // 方形的高度
});
canvas.add(rect)

圆形

var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
canvas.add(circle);

三角形

var triangle = new fabric.Triangle({
  width: 20,
  height: 30,
  fill: 'blue',
  left: 50,
  top: 50
});
canvas.add(triangle);

椭圆

var ellipse = new fabric.Ellipse({
  rx: 45,
  ry: 80,
  fill: 'yellow',
  stroke: 'red',
  strokeWidth: 3,
  angle: 30,
  left: 100,
  top: 100
});
canvas.add(ellipse);

线段

var line =  new fabric.Line([100, 100, 200, 200], {
  strokeWidth: 2,
  stroke: 'rgba(255,0,0,0.8)',
  selectable: false
});
canvas.add(line);

文本

var text = new fabric.Text('Hello World', {
  fontSize: 30,
  left: 100,
  top: 100,
  originX: 'center',
  originY: 'center'
})
canvas.add(text)

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress