HTML5简易在线画图工具

继上次学习了HTML5的路径画圆做了动态时钟、异次元空间的反转做了运动的太阳系，这两天将画线、画圆、填充等知识点结合起来做了一个简易的在线画图工具：

查看DEMO：HTML5简易在线画图工具

功能包括自由画笔、橡皮擦、文字填充、画三角形、画圆等，相对我这个新手来说，感觉挺难的，不过还是参考了资料慢慢“拼”出来了。

自由画笔的思路：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

/******* 自由画笔 *******/ function dBrush(n){    setStatus(actions,n,1);    //鼠标按下的时候    var status = 0;    canvas.onmousedown= function (e){      e=window.event||e;      var sX=e.pageX- this .offsetLeft;      var sY=e.pageY- this .offsetTop;      can.beginPath();      can.moveTo(sX,sY);      status=1;    }    //鼠标移动的时候    canvas.onmousemove= function (e){      e=window.event||e;      var eX=e.pageX- this .offsetLeft;      var eY=e.pageY- this .offsetTop;      if (status==1){        can.lineTo(eX,eY);        can.stroke();      } else { return false }      }    //鼠标抬起的时候    canvas.onmouseup= function (){      can.closePath();      status=0;         }    //鼠标移出canvas画布结束画图    canvas.onmouseout= function (){      can.closePath();      status=0;    } }

填充文字，主要用到fillText(val,x,y)：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/******* 文字 *******/ function dText(n){    setStatus(actions,n,1);    canvas.onmousedown= function (e){      e=window.event||e;      var x=e.pageX- this .offsetLeft;      var y=e.pageY- this .offsetTop;      var val = window.prompt( '输入填充的文字' , '' );      if (val== null ) return false ; //输入为空则返回      can.fillText(val,x,y);      dBrush(0); //填入文字后返回自由画笔工具    }    canvas.onmouseup= null ;    canvas.onmousemove= null ;    canvas.onmouseout= null ; }

直线工具，主要确定起点和终点，然后lineTo(x,y)就可以了：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/******* 直线 *******/ function dLine(n){    setStatus(actions,n,1);    //画直线，鼠标按下时，当前鼠标位置为起点    canvas.onmousedown= function (e){      e=window.event||e;      var sX=e.pageX- this .offsetLeft;      var sY=e.pageY- this .offsetTop;      can.beginPath();      can.moveTo(sX,sY);    }    //画直线，鼠标抬起时，当前鼠标位置为终点    canvas.onmouseup= function (e){      e=window.event||e;      var eX=e.pageX- this .offsetLeft;      var eY=e.pageY- this .offsetTop;      can.lineTo(eX,eY);      can.closePath();      can.stroke();    }    canvas.onmousemove= null ;    canvas.onmouseout= null ; }

最后贴一个空心圆，起点坐标为圆心，鼠标移动距离为半径：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

/******* 空心圆圈 *******/ function dArc(n){    setStatus(actions,n,1);    var sX=0;  //内部的“全局标量”    var sY=0;    //画空心圆，鼠标按下时，当前鼠标位置为圆心    canvas.onmousedown= function (e){      e=window.event||e;      sX=e.pageX- this .offsetLeft;      sY=e.pageY- this .offsetTop;    }       //画空心圆，鼠标抬起时，当前鼠标位置为外圆结束点    canvas.onmouseup= function (e){      e=window.event||e;      var eX=e.pageX- this .offsetLeft;      var eY=e.pageY- this .offsetTop;      var dX=eX-sX      var dY=eY-sY;      //计算出半径      var r = Math.sqrt(Math.pow(dX,2)+Math.pow(dY,2));      can.beginPath();      can.arc(sX,sY,r,0,360, false );      can.closePath();      can.stroke();    }    canvas.onmousemove= null ;    canvas.onmouseout= null ; }

好了，剩下的其他工具代码就不贴了，可以查看DEMO里的源代码。