HTML5 Canvas实现web画图之自由绘制矩形

        接上一篇的自由画笔的绘制，接下来要做的功能是像windows附件中选择矩形框之后，可以在画布上自由绘制矩形。该功能和自由画笔类似，不断的拖动时不断的由当前点和最初的点画一个矩形即可，只不过此时还要删除上一次绘制的矩形，多了一个图层的设置比较的麻烦。

其中JCanvas的API对图层（Layer）的定义：

Each layer can contain only one drawing (rectangle, arc, image, etc.). This is because each drawing is the layer object itself.

也就是说，每个图层只能包含一个画图对象（矩形、扇形、图片等等），，那么在鼠标移动画矩形的时候，就要先删除图层中上一次拖动的而画出的

矩形，然后再画出当前拖动产生的矩形，这样就在不断的拖动的过程中，画布上只画出了一个矩形。所以，自由绘制矩形的过程应该如下：

1. 鼠标按下事件：onmousedown，记录矩形左上角的坐标，画图即将开始，并设置图层名字；
2. 鼠标拖