返回 导航

HTML5 / CSS3

hangge.com

HTML5 - 好用的Canvas绘图库介绍(Fabric.js)

作者:hangge | 2016-01-23 10:34
如果我们要在<canvas>上绘制复杂的图形,就需要学习各种几何知识。
好在网上有现成的绘图库供我们使用,不但可以轻松绘制圆形、三角形、椭圆形、多边形等基本图形,而且还提供了许多高级方法。让我们不必再一笔一笔地画了,只要使用这些库,它的底层使用JavaScript帮我们完成正确的<canvas>操作。
这里介绍一个比较优秀的绘图库:Fabric.js


1,项目地址
官网地址:http://fabricjs.com/
GitHub:https://github.com/kangax/fabric.js/

2,在线样例

3,简单的使用样例
在画布上绘制一个红色矩形。
<!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'
	});

	canvas.add(rect);
  }
</script>
</head>
<body>
    <canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>
评论

全部评论(1)

回到顶部