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里的源代码。
HTML5简易在线画图工具的更多相关文章
- Processon 一款基于HTML5的在线作图工具
CSDN的蒋涛不久前在微博上评价说ProcessOn是web版的visio,出于好奇私下对ProcessOn进行了一番研究.最后发现无论是在用户体验上,还是在技术上,ProcessOn都比微软的Vis ...
- 一个简单的html5页面在线速成工具!(当然本文主要说下他的成果的结构)
分享一个好玩的web app页面速成工具 当然主要是让大家看下他的原理 看着他的结构大家就该猜到这个了.这个是利用换页之后给当前div加了一个active,然后利用css控制效果 这个毫无疑问是采用最 ...
- 好用的在线画图工具processon
ProcessOn是一款基于SaaS的前沿.高效线上作图工具,它将Visio.Xmind等专业作图工具搬到了"云端" 注册链接:https://www.processon.com/ ...
- canvas实例_在线画图工具
fadsfklasdjfklasjdklfjasdlk;fjasd;lfjaskl;dfjal
- 推荐十款非常优秀的 HTML5 在线设计工具
网络有很多优秀的设计和开发工具可能大家都不知道,因此这篇文章就向设计师推荐十款优秀 HTML5 在线工具,这些工具能够帮助设计师们设计出更有创意的作品.随着 HTML5 技术的不断成熟,网络上涌现出越 ...
- HTML5 canvas 在线画笔绘图工具(三)
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
- HTML5 canvas 在线画笔绘图工具(一)
HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...
- HTML5 canvas 在线画笔绘图工具(二)
Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...
- 9款国内外垂直领域的在线作图工具:那些可以替代Visio的应用!【转】
http://www.csdn.net/article/2015-02-12/2823939 摘要:现在越来越多的创业公司都希望提升办公的效率,今天介绍的几款也能提升办公效率,不过它们都属于垂直领域的 ...
随机推荐
- centos7 玩aapt 安卓应用apk解包工具的安装
最近在做一个应用市场的项目,需要在centos7下面对apk解包读取其信息,这就想到了使用Google的解包工具aapt,但是由于中国的原因,国内访问原生工具的地址就有些麻烦,这里就贴出地址:http ...
- Mysql 数据库表操作
☞ 创建表CREATE TABLE `数据库`.`表` ( `id` INT( 11 ) NOT NULL AUTO_INCREMENT COMMENT '注释',`type_name` VARCHA ...
- jquery技巧(持续更新。。)
(1)集合处理功能 //为索引为0,1,2的元素分别设置不同的字体颜色 $('p').each(function(i){ this.styl ...
- 序列化魔术函数__sleep()和反序列化魔术函数__wakeup()
1.string serialize ( mixed $value )— 产生一个可存储的值的表示 serialize() 返回字符串,此字符串包含了表示 value 的字节流,可以存储于任何地方. ...
- 解决VS2015无法调试dotnet core项目
dotnet core 1.0正式版和VS2015 update3安装后一直无法在VS中正常调试. 错误提示:The debugger's worker process (msvsmon.exe) u ...
- 阿里云ECS服务器配置ubuntu安装openfire服务器
最近搞了一台阿里云的ECS服务器,因为搞活动半年免费,所以就申请了一台,过两天就批准下来,顺便多花了1百多RMB买了固定IP.总体说来还是挺值的,觉得一个人用挺浪费,分享出来跟大家一起玩玩. 搞台服务 ...
- 网页端启动WinForm
网页端启动WinForm 程序 在逛淘宝或者使用QQ相关的产品的时候,比如淘宝我要联系店家点击旺旺图标的时候能够自动启动阿里旺旺进行聊天.之前很奇怪为什么网页端能够自动启动客户端程序,最近在开发吉特仓 ...
- iOS中的隐式动画
隐式动画就是指 在 非 人为在代码中 定义动画 而系统却默认 自带 的动画 叫做隐式动画. 比如 改变 图层 的颜色 位置 和 透明度 的时候 都会 产生附带的渐变的 ...
- C#反射(一) 【转】
在还不太熟悉反射的昨天,以为反射很神秘,在网上到处找答案.今天找了段代码敲了一下,茅塞顿开!其实反射也就那么简单的一回事! 反射是一种机制,通过这种机制我们可以知道一个未知类型的类型信息.比如, ...
- matlab在图片上画框
matlab在图片上画框 之前写过一个MATLAB在图片上画框的代码, http://blog.csdn.net/carson2005/article/details/17262811 最近使用后发现 ...