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

鼠标按下事件：onmousedown，准备开始画图，记录画图初始位置；

鼠标拖动事件：onmousemove，画图。自由画笔的画图过程其实就是鼠标移动时，不断画上一个点和当前点的连线的过程；

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

前台主要代码：

=="drawPen()"/> <div> 选择画笔颜色： ===> 选择画笔宽度： =>4>8> ===> => => => <script type="text/javascript"> { var color= "#"+$("#color").val(); var width=$("#penWidth option:selected").text(); CanvasExt.drawPen("can",color,width); } </script>

封装的JS方法：

var layer=0; //图层索引 CanvasExt={ drawPen: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=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:.penColor=penColor; }, setPenWidth:.penWidth=width; } } 其中画笔还有选择颜色和设置粗细的功能，选择颜色用的是jsColor.js，最后运行效果图如下：