web前端|H5教程
HTML5，画图工具
web前端-H5教程
个人表白网站源码,vscode部署ftp,ubuntu挂载移动硬盘内容,亚马逊vps tomcat,sqlite怎么使用教程,弹出选择目录框插件,前端框架被淘汰了吗,家里常见地爬虫,php生成字符串,seo Yeon,app影视网站源码,简单网页制作代码样例,云购cms模板下载,微信小程序打卡有奖源码lzw
继上次学习了HTML5的路径画圆做了动态时钟、异次元空间的反转做了运动的太阳系，这两天将画线、画圆、填充等知识点结合起来做了一个简易的在线画图工具：
微信任务发布大厅源码,ubuntu如何扒网页,tomcat添加启动项目,爬虫抓取基金,php设置ua,seo是什么职位每天需要做什么lzw
vb 抢购 源码,vscode更新提交svn,ubuntu开机半天,tomcat启动自己关闭,sqlite3上百万数据,微信小程序用得到爬虫吗,php5.3.10,江苏seo排名收费低,网站模板下载网站有哪些内容,注册跳转页面模板lzw
查看DEMO：HTML5简易在线画图工具
功能包括自由画笔、橡皮擦、文字填充、画三角形、画圆等，相对我这个新手来说，感觉挺难的，不过还是参考了资料慢慢“拼”出来了。
自由画笔的思路：
/******* 自由画笔 *******/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)：
/******* 文字 *******/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)就可以了：
/******* 直线 *******/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;}
最后贴一个空心圆，起点坐标为圆心，鼠标移动距离为半径：
/******* 空心圆圈 *******/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里的源代码。
