继上次学习了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 /******* ***画笔 *******/functiondBrush(n){  setStatus(actions,n,1);  //鼠标按下的时候  varstatus = 0;  canvas.onmousedown=function(e){    e=window.event||e;    varsX=e.pageX-this.offsetLeft;    varsY=e.pageY-this.offsetTop;    can.beginPath();    can.moveTo(sX,sY);    status=1;  }  //鼠标移动的时候  canvas.onmousemove=function(e){    e=window.event||e;    vareX=e.pageX-this.offsetLeft;    vareY=e.pageY-this.offsetTop;    if(status==1){      can.lineTo(eX,eY);      can.stroke();    }else{returnfalse}     }  //鼠标抬起的时候  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 /******* 文字 *******/functiondText(n){  setStatus(actions,n,1);  canvas.onmousedown=function(e){    e=window.event||e;    varx=e.pageX-this.offsetLeft;    vary=e.pageY-this.offsetTop;    varval = window.prompt(\'输入填充的文字\',\'\');    if(val==null) returnfalse; //输入为空则返回    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 /******* 直线 *******/functiondLine(n){  setStatus(actions,n,1);  //画直线，鼠标按下时，当前鼠标位置为起点  canvas.onmousedown=function(e){    e=window.event||e;    varsX=e.pageX-this.offsetLeft;    varsY=e.pageY-this.offsetTop;    can.beginPath();    can.moveTo(sX,sY);  }  //画直线，鼠标抬起时，当前鼠标位置为终点  canvas.onmouseup=function(e){    e=window.event||e;    vareX=e.pageX-this.offsetLeft;    vareY=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 /******* 空心圆圈 *******/functiondArc(n){  setStatus(actions,n,1);  varsX=0;  //内部的“全局标量”  varsY=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;    vareX=e.pageX-this.offsetLeft;    vareY=e.pageY-this.offsetTop;    vardX=eX-sX    vardY=eY-sY;    //计算出半径    varr = 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里的源代码。