使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5:
功能很简单,原理其实和拖放是类似的,主要是三个事件:
- 在canvas 上绑定mousedown 事件以标志绘画的开始(调用moveTo 移动画笔)
- 在document 上绑定mousemove 事件来处理绘画时的行为(调用lineTo 以及stroke 进行绘画)
- 在document 上绑定mouseup 事件以标志绘画的结束(解绑document 上的两个事件)
实现时需特别注意的一点是调用moveTo 以及lineTo 方法时如何传递正确的坐标值,这个坐标值应该是光标相对于canvas 左上角的偏移量,获取时需要把canvas 相对于当前视口的位置考虑进去,getBoundingClientRect 方法则正好派上了用场(支持HTML5 的浏览器应该都实现了这个方法),最后用event 对象的clientX, clientY 减去getBoundingClientRect 方法返回的left, top 值即可。
下面是实现代码:
05 |
} else if ( typeof arg == 'string' ) { |
06 |
this .canvas = document.getElementById(arg); |
15 |
if (! this .canvas.getContext) { |
18 |
this .context = this .canvas.getContext( '2d' ); |
19 |
this .canvas.onselectstart = function () { |
20 |
return false ; //修复chrome下光标样式的问题 |
22 |
this .canvas.onmousedown = function (event) { |
23 |
that.drawBegin(event); |
26 |
drawBegin: function (e) { |
28 |
stage_info = this .canvas.getBoundingClientRect(); |
29 |
window.getSelection ? window.getSelection().removeAllRanges() : |
30 |
document.selection.empty(); //清除文本的选中 |
32 |
e.clientX - stage_info.left, |
33 |
e.clientY - stage_info.top |
35 |
document.onmousemove = function (event) { |
38 |
document.onmouseup = this .drawEnd; |
40 |
drawing: function (e) { |
41 |
var stage_info = this .canvas.getBoundingClientRect(); |
43 |
e.clientX - stage_info.left, |
44 |
e.clientY - stage_info.top |
46 |
this .context.stroke(); |
49 |
document.onmousemove = document.onmouseup = null ; |
52 |
var draw = new Draw( 'the_stage' ); |
就这样一个简单的鼠绘功能就完成了,不足之处也有,比如不能够画点。。。 我个人觉得用canvas 来做画图还是比较弱的,复杂一些的功能就不太好实现了,不过大家也可以尝试下哦,比如要添加个保存图片的方法,定义Draw.prototype.save = function() {...},其中可调用toDataURL 方法实现。
最新文章
- 【转】将grub2安装到u盘的方法
- HoloLens shell overview(Translation)
- Linux跨用户copy文件
- 加快phpstorm、rubymine、pycharm系列IDE运行速度的方法
- 和View Controllers一起工作
- tomcat的部署
- webService调用的N种方式
- ProGuard
- java socket 一个服务器对应多个客户端,可以互相发送消息
- JavaScript--数组--sort比较器
- 几个前端博客 good
- CMDB服务器管理系统【s5day88】:采集资产-文件配置(一)
- python 几分钟前,几小时前,几天前转为时间戳
- 【2017山东day7】养猫
- Hdoj 4540.威威猫系列故事——打地鼠 题解
- objectMapper、JsonNode、JsonObject常用方法
- 从香港机房引入google/bitbucket路由
- 微信小程序cavas画图并保存
- Python CSV Reader/Writer 例子--转载
- nodejs中cookie、session的使用
热门文章
- 我是一个MySQL小白
- python学习之面向对象程序设计的一些思考
- golang 三个点的用法
- python2.7入门---循环语句(for&;嵌套循环)
- 数据库 MySQL part1
- mybatis <;collection>;标签 类型为string时无法获取重复数据错误
- App测试基本流程详解
- 第八篇Python基本数据类型之列表、元组与字典
- MyCAT+MySQL 搭建高可用企业级数据库集群——第2章 MyCat入门
- xampp开户,apache打开出现端口被占用提示