HTML5简易在线画图工具 原文:HTML5简易在线画图工具

继上次学习了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里的源代码。

posted on 2014-02-24 01:00 NET未来之路 阅读() 评论() 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/3563943.html

HTML5简易在线画图工具-编程知识网创作挑战赛新人创作奖励来咯,坚持创作打卡瓜分现金大奖