用paper.js画矩形

1.创建一个canvas

<canvas id="myCanvas" resize></canvas>

2.引入paper.js

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.js"></script>

3.js部分

paper.install(window);
window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    paper.setup(canvas);
    var shapesLayer = new paper.Layer();
    var path;
    var point, length;
    var tool = new paper.Tool();
    tool.minDistance = 10;
    tool.onMouseDown = function (event) {
        point = event.point;
        length = shapesLayer.children.length;
    };
    tool.onMouseDrag = function (event) {
        var topLeft = new paper.Point(point);
        var rectSize = new paper.Size((event.point.x - point.x), (event.point.y - point.y));
        var rect = new paper.Rectangle(topLeft, rectSize);
        var path = new paper.Path.Rectangle(rect, 0);
        path.strokeColor = 'black';
       /* path.dashArray = [5, 1];*/
        if (shapesLayer.children.length >= (length + 2) && shapesLayer.children.length >= 2) {
            shapesLayer.removeChildren(shapesLayer.children.length - 2, shapesLayer.children.length - 1);
        }
    };

}