HTML5 - 好用的Canvas绘图库介绍(Fabric.js)
作者:hangge | 2016-01-23 10:34
如果我们要在<canvas>上绘制复杂的图形,就需要学习各种几何知识。
3,简单的使用样例
好在网上有现成的绘图库供我们使用,不但可以轻松绘制圆形、三角形、椭圆形、多边形等基本图形,而且还提供了许多高级方法。让我们不必再一笔一笔地画了,只要使用这些库,它的底层使用JavaScript帮我们完成正确的<canvas>操作。
这里介绍一个比较优秀的绘图库:Fabric.js
1,项目地址
官网地址:http://fabricjs.com/
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)
这个有没有相关中文文档或者教程么?
官方文档太晦涩
站长回复:你指的是Fabric.js吗?这个好像没有比较好的中文文档。