使用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 方法实现。
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...
- 一起用HTML5 canvas做一个简单又骚气的粒子引擎
前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...
- html5 canvas 实现一个简单的叮当猫头部
原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...
- Java 从零开始实现一个画图板、以及图像处理功能,代码可复现
Java 从零开始实现一个画图板.以及图像处理功能,代码可复现 这是一个学习分享博客,带你从零开始实现一个画图板.图像处理的小项目,为了降低阅读难度,本博客将画图板的一步步迭代优化过程展示给读者,篇幅 ...
- 用HTML5的canvas做一个时钟
对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...
- 怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
- [译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
- html5 canvas做的图表插件
用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...
- 用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
随机推荐
- 用友二次开发之科脉TOT3凭证接口
按客户的要求,根据科脉导出的数据,开发一个工具,将凭证导入T3 这个科目导出的凭证格式. 选择账套登陆,你没看错,这个是我开发的登陆界面. 选择接口文件. 软件自动进数据分类,你可以看到数据了.但只是 ...
- java.lang.UnsupportedOperationException: seccomp unavailable: CONFIG_SECCOMP not compiled into kernel, CONFIG_SECCOMP and CONFIG_SECCOMP_FILTER are needed
错误描述: ElasticSearch集群启动错误,错误的原因是:因为Centos6不支持SecComp,而ES默认bootstrap.system_call_filter为true进行检测,所以导致 ...
- 如何保证HashMap线程安全
可使用Java 1.5推荐的java.util.concurrent包ConcurrentHashMap来实现,内部不再使用类似HashTable的synchronized同步锁,而是使用Reentr ...
- python2.7练习小例子(十九)
19):题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? #!/usr/bin/python # -*- codi ...
- python的初体验
最近由于毕业答辩,导致一些博客没有更新,见谅,今天我们开始一些新的内容 1.python的注释 单行注释:# 多行注释: ''' 这是多行注释 我们可以在里面写很多很多的行 ''' 2.编码风格 #c ...
- Java:详解内部类
可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...
- ORB-SLAM 代码笔记(五)Frame类
Frame类的成员变量主要包含从摄像头获取的图像的 1. 特征点信息(关键点+描述字) 2. 尺寸不变特征所用金字塔信息,这些都定义在ORBextractor对象中 3. 词袋模型参数,用于跟踪失败情 ...
- linux redhat 打开防火墙中的某个端口
服务器成功监听了一个端口(如 5500),但是外面连接不进来,telnet其端口不通,解决办法如下(在root用户下): $ /sbin/iptables -I INPUT -p tcp --dpor ...
- 小白学习mysql 之 innodb locks
Innodb 锁类型: Shared and Exclusive Locks Intention Locks Record Locks Gap Locks Next-Key Locks Insert ...
- html5判断设备的动作
相应的事件 deviceorientation事件提供设备的物理方向信息,表示为一系列本地坐标系的旋角. devicemotion事件提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标.其还 ...