html5实现圆圈里带一个三角形,Fabric.js - 详细使用教程1（绘制图形：矩形、圆形、三角形、不规则图形）...

一、绘制图形

1，绘制矩形

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

canvas {

border: 1px dashed black;

}

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);

}

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);