HTML5使用Canvas做一个在线画图程序（支持把画布保存为图像）(4)_H5之家

如果我们要在<canvas>上绘制复杂的图形，就需要学习各种几何知识。
好在网上有现成的绘图库供我们使用，不但可以轻松绘制圆形、三角形、椭圆形、多边形等基本图形，而且还提供了许多高级方法。让我们不必再一笔一笔地画了，只要使用这些库，它的底层使用JavaScript帮我们完成正确的<canvas>操作。

这里介绍一个比较优秀的绘图库：Fabric.js

原文:HTML5 - 好用的Canvas绘图库介绍（Fabric.js）

1，项目地址

官网地址：
GitHub：https://github.com/kangax/fabric.js/

2，在线样例

Demos
Kitchensink demo
Benchmarks

3，简单的使用样例

在画布上绘制一个红色矩形。

原文:HTML5 - 好用的Canvas绘图库介绍（Fabric.js）

<!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>