Fabric.js - 详细使用教程1(绘制图形:矩形、圆形、三角形、不规则图形)
一、绘制图形
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);