Fabric.js - 详细使用教程1（绘制图形：矩形、圆形、三角形、不规则图形）

作者：hangge | 2020-02-28 08:10

一、绘制图形

1，绘制矩形

下面代码在画布上绘制一个红色圆角矩形，并带有橙色边框。

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px dashed black;
    }
</style>
<script src="dist/fabric.js"></script>
<script>
  window.onload = function() {
    var canvas = new fabric.Canvas('canvas');
  
    var rect = new fabric.Rect({
        top : 50, //距离画布上边的距离
        left : 100, //距离画布左侧的距离，单位是像素
        width : 100, //矩形的宽度
        height : 70, //矩形的高度
        fill : 'red', //填充的颜色
        stroke: 'orange', // 边框原色
        strokeWidth: 5, // 边框大小
        rx: 8, //圆角半径
        ry: 4 //圆角半径
    });
  
    canvas.add(rect);
  }
</script>
</head>
<body>
    <canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>

2，绘制圆形

下面代码在画布上绘制一个红色圆形，并且带有橙色边框。

var canvas = new fabric.Canvas('canvas');

var circle = new fabric.Circle({
    top : 50, //距离画布上边的距离
    left : 100, //距离画布左侧的距离，单位是像素
    radius : 50, //圆形半径
    fill : 'red', //填充的颜色
    stroke: 'orange', // 边框颜色
    strokeWidth: 5 // 边框大小
});

canvas.add(circle);

3，绘制三角形

下面代码在画布上绘制一个红色等腰三角形，并且带有橙色边框。

var canvas = new fabric.Canvas('canvas');

var triangle = new fabric.Triangle({
    top : 50, //距离画布上边的距离
    left : 100, //距离画布左侧的距离，单位是像素
    width : 100, //矩形的宽度
    height : 70, //矩形的高度
    fill : 'red', //填充的颜色
    stroke: 'orange', // 边框原色
    strokeWidth: 5 // 边框大小
});

canvas.add(triangle);

4，绘制不规则图形

下面我们使用路径绘制一个不规则的图形，即用点和线的移动的方式进行绘图。

（1）在 fabric.Path( ) 方法中：

“M”代表“移动”命令，这个“M 00” 代表把画笔移动到（0,0）点坐标。
“L”代表“线”，“L 200 100”的意思是使用钢笔画一条线，从（0,0）坐标画到（200,100）坐标。
“z” 代表让图形闭合路径。

（2）路径画好后，我们可以用 set( ) 方法对其位置、颜色、角度、透明度等属性进行设置。

var canvas = new fabric.Canvas('canvas');

var path = new fabric.Path('M 0 0 L 200 100 L 170 150 z');
path.set({
    top : 20, //距离画布上边的距离
    left : 50, //距离画布左侧的距离，单位是像素
    fill : 'red', //填充的颜色
    stroke: 'orange', // 边框颜色
    strokeWidth: 5 // 边框大小
});

canvas.add(path);

其他