HTML5 Canvas实现web画图之自由画笔

最近需要做一个类似windows附件中的画图工具，是在web页面可以自由画图的，目前用的主要是HTML5的Canvas画布来实现该功能的。
而操作Canvas主要用的是在Google上找的一个Jquery插件：JCanvas,其中封装了Canvas画图的一些基本方法，并且语法和Jquery几乎一致。
插件地址：http://calebevans.me/projects/jcanvas/docs/saveCanvas/
其中的API封装的不错，让自己可以少写很多画图的方法，主要用于实现画图的功能。
接下来就主要是自由画笔功能的实现了，其中主要涉及以下几个鼠标事件：

1. 鼠标按下事件：onmousedown，准备开始画图，记录画图初始位置；
2. 鼠标拖动事件：onmousemove，画图。自由画笔的画图过程其实就是鼠标移动时，不断画上一个点和当前点的连线的过程；

3. 鼠标松开事件：onmouseup，画图结束，清除鼠标移动事件；

   前台主要代码：

<div>
    <input type="button"  value="自由画笔" onclick="drawPen()"/>
    <div>
        选择画笔颜色： <input id="color" class="color" style="width: 60px;" width="10px" value="66ff00" onchange="changePenColor()">
    </div>
    <div>
        选择画笔宽度： 
        <select id="penWidth" onchange="changePenWidth()">
            <option>2</option>
            <option>4</option>
            <option>6</option>
            <option>8</option>
        </select>
    </div>
        <canvas id="can" width="800" height="600" style="border:1px solid #999;" >您的浏览器不支持canvas画图功能，推荐使用Google浏览器!</canvas>
</div>
<script type="text/javascript"  src="./script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"  src="./script/jcanvas.js"></script>
<script type="text/javascript"  src="./script/jcanvas-ext.js"></script>
<script type="text/javascript"  src="./script/jscolor.js"></script>
<script type="text/javascript">
function drawPen(){
    var color= "#"+$("#color").val();
    var width=$("#penWidth option:selected").text();
    CanvasExt.drawPen("can",color,width);
}
</script> 

封装的JS方法：

var layer=0;    //图层索引  
CanvasExt={
    drawPen:function(canvasId,penColor,penWidth){
                var that=this;
                that.penColor=penColor;
                that.penWidth=penWidth;
                //canvas DOM对象  
                var canvas=document.getElementById(canvasId);
                //canvas 的矩形框
                var canvasRect = canvas.getBoundingClientRect();

                //矩形框的左上角坐标
                var canvasLeft=canvasRect.left;
                var canvasTop=canvasRect.top;

                //画图坐标原点
                var sourceX=0;
                var sourceY=0;

                var layerIndex=layer;
                var layerName="layer";



                //鼠标点击按下事件，画图准备
                canvas.onmousedown=function(e){

                    //设置画笔颜色和宽度
                    var color=that.penColor;
                    var width=that.penWidth;

                    //设置原点坐标
                    sourceX=e.clientX-canvasLeft;       
                    sourceY=e.clientY-canvasTop;        

                    //鼠标移动事件，画图
                    canvas.onmousemove=function(e){

                        layerIndex++;
                        layer++;
                        layerName+=layerIndex;
                        //当前坐标
                        var currX=e.clientX-canvasLeft;
                        var currY=e.clientY-canvasTop;

                        //画线
                        $("#"+canvasId).drawLine({
                          layer:true,
                          name:layerName,
                          strokeStyle: color,
                          strokeWidth: width,
                          x1: sourceX, y1: sourceY,
                          x2: currX,
                          y2: currY
                        });

                        //设置原点坐标
                        sourceX=currX;
                        sourceY=currY;
                    }
            }
                //鼠标没有按下了，画图结束
                canvas.onmouseup=function(e){
                    $("#"+canvasId).drawLayers().saveCanvas();
                    canvas.onmousemove=null;
    },
     setPenColor:function(penColor){
           this.penColor=penColor;
      },
      setPenWidth:function(width){
           this.penWidth=width;
       }
}

其中画笔还有选择颜色和设置粗细的功能，选择颜色用的是jsColor.js，最后运行效果图如下：