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. 鼠标拖动事件：onmousemove，先根据图层名字，删除该图层。再根据当前点的位置，画一个一个新的矩形；
3. 鼠标左键松开事件：onmousedown，画图结束。

其中涉及的图层操作的方法涉及的参数：

1、addLayer:

• type:图层类型，例如：rectangle，矩形图层；ellipse，椭圆图层，等等；
• strokeStyle：图层中线条的颜色，为RGB数值；
• strokeWidth：图层中线条的宽度；
• name：图层名称；
• x：图层坐标X；
• y：图层坐标Y；
• fromCenter: boolean类型，true的时候，表示上面的x,y坐标表示的是中心位置；false的时候，表示的是左上角的位置；
• width：图层宽度；
• height ：图层高度；

其中主要要注意的是fromCenter参数的理解，以画圆的图层为例，true的时候，x,y表示的是圆心的位置，而为false的时候，表示的是圆左上角的位置。

2、removeLayer：

参数只有一个，为Layer名或者Index，根据图层名或者索引移除图层；

接下来就主要是代码部分了，前台部分简单，和上一篇的类似，就不贴出来了，主要贴画图的主要部分代码：

drawRect:function(canvasId,penColor,strokeWidth){   var that=this;   that.penColor=penColor;   that.penWidth=strokeWidth;      var canvas=document.getElementById(canvasId);var canvasRect = canvas.getBoundingClientRect();var canvasLeft=canvasRect.left;var canvasTop=canvasRect.top;var layerIndex=layer;var layerName="layer";var x=0;var y=0;canvas.onmousedown=function(e){var color=that.penColor;var penWidth=that.penWidth;layerIndex++;layer++;layerName+=layerIndex;x=e.clientX-canvasLeft;y=e.clientY-canvasTop;$("#"+canvasId).addLayer({type: 'rectangle',strokeStyle: color,strokeWidth: penWidth, name:layerName, fromCenter: false, x: x, y: y,  width: 1,  height: 1});$("#"+canvasId).drawLayers();$("#"+canvasId).saveCanvas();canvas.onmousemove=function(e){width=e.clientX-canvasLeft-x;height=e.clientY-canvasTop-y;$("#"+canvasId).removeLayer(layerName);$("#"+canvasId).addLayer({type: 'rectangle',strokeStyle: color,strokeWidth: penWidth, name:layerName, fromCenter: false, x: x, y: y, width: width, height: height});$("#"+canvasId).drawLayers();}}canvas.onmouseup=function(e){    var color=that.penColor;    var penWidth=that.penWidth; canvas.onmousemove=null;width=e.clientX-canvasLeft-x;height=e.clientY-canvasTop-y;$("#"+canvasId).removeLayer(layerName);$("#"+canvasId).addLayer({type: 'rectangle',strokeStyle: color,strokeWidth: penWidth, name:layerName, fromCenter: false, x: x, y: y, width: width, height: height});$("#"+canvasId).drawLayers();$("#"+canvasId).saveCanvas();}}

实现了自由绘制矩形的功能，其他图形，例如圆、正方形、椭圆、箭头等等的啊，就和这类似，比较的简单了，以下是画矩形和椭圆的运行效果图：