使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5:

功能很简单,原理其实和拖放是类似的,主要是三个事件:

  1. 在canvas 上绑定mousedown 事件以标志绘画的开始(调用moveTo 移动画笔)
  2. 在document 上绑定mousemove 事件来处理绘画时的行为(调用lineTo 以及stroke 进行绘画)
  3. 在document 上绑定mouseup 事件以标志绘画的结束(解绑document 上的两个事件)

实现时需特别注意的一点是调用moveTo 以及lineTo 方法时如何传递正确的坐标值,这个坐标值应该是光标相对于canvas 左上角的偏移量,获取时需要把canvas 相对于当前视口的位置考虑进去,getBoundingClientRect 方法则正好派上了用场(支持HTML5 的浏览器应该都实现了这个方法),最后用event 对象的clientX, clientY 减去getBoundingClientRect 方法返回的left, top 值即可。

下面是实现代码:

01 // <![CDATA[
02 function Draw(arg) {
03     if (arg.nodeType) {
04         this.canvas = arg;
05     } else if (typeof arg == 'string') {
06         this.canvas = document.getElementById(arg);
07     } else {
08         return;
09     }
10     this.init();
11 }
12 Draw.prototype = {
13     init: function() {
14         var that = this;
15         if (!this.canvas.getContext) {
16             return;
17         }
18         this.context = this.canvas.getContext('2d');
19         this.canvas.onselectstart = function () {
20             return false//修复chrome下光标样式的问题
21         };
22         this.canvas.onmousedown = function(event) {
23             that.drawBegin(event);
24         };
25     },
26     drawBegin: function(e) {
27         var that = this,
28             stage_info = this.canvas.getBoundingClientRect();
29         window.getSelection ? window.getSelection().removeAllRanges() :
30                                 document.selection.empty();  //清除文本的选中
31         this.context.moveTo(
32             e.clientX - stage_info.left,
33             e.clientY - stage_info.top
34         );
35         document.onmousemove = function(event) {
36             that.drawing(event);
37         };
38         document.onmouseup = this.drawEnd;
39     },
40     drawing: function(e) {
41         var stage_info = this.canvas.getBoundingClientRect();
42         this.context.lineTo(
43             e.clientX - stage_info.left,
44             e.clientY - stage_info.top
45         );
46         this.context.stroke();
47     },
48     drawEnd: function() {
49         document.onmousemove = document.onmouseup = null;
50     }
51 };
52 var draw = new Draw('the_stage');
53 // ]]>

就这样一个简单的鼠绘功能就完成了,不足之处也有,比如不能够画点。。。 我个人觉得用canvas 来做画图还是比较弱的,复杂一些的功能就不太好实现了,不过大家也可以尝试下哦,比如要添加个保存图片的方法,定义Draw.prototype.save = function() {...},其中可调用toDataURL 方法实现。

用HTML5 Canvas做一个画图板的更多相关文章

  1. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  2. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  3. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  4. Java 从零开始实现一个画图板、以及图像处理功能,代码可复现

    Java 从零开始实现一个画图板.以及图像处理功能,代码可复现 这是一个学习分享博客,带你从零开始实现一个画图板.图像处理的小项目,为了降低阅读难度,本博客将画图板的一步步迭代优化过程展示给读者,篇幅 ...

  5. 用HTML5的canvas做一个时钟

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...

  6. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

  7. [译]怎样用HTML5 Canvas制作一个简单的游戏

    这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...

  8. html5 canvas做的图表插件

    用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

  9. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

随机推荐

  1. 用友二次开发之科脉TOT3凭证接口

    按客户的要求,根据科脉导出的数据,开发一个工具,将凭证导入T3 这个科目导出的凭证格式. 选择账套登陆,你没看错,这个是我开发的登陆界面. 选择接口文件. 软件自动进数据分类,你可以看到数据了.但只是 ...

  2. 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进行检测,所以导致 ...

  3. 如何保证HashMap线程安全

    可使用Java 1.5推荐的java.util.concurrent包ConcurrentHashMap来实现,内部不再使用类似HashTable的synchronized同步锁,而是使用Reentr ...

  4. python2.7练习小例子(十九)

        19):题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? #!/usr/bin/python # -*- codi ...

  5. python的初体验

    最近由于毕业答辩,导致一些博客没有更新,见谅,今天我们开始一些新的内容 1.python的注释 单行注释:# 多行注释: ''' 这是多行注释 我们可以在里面写很多很多的行 ''' 2.编码风格 #c ...

  6. Java:详解内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...

  7. ORB-SLAM 代码笔记(五)Frame类

    Frame类的成员变量主要包含从摄像头获取的图像的 1. 特征点信息(关键点+描述字) 2. 尺寸不变特征所用金字塔信息,这些都定义在ORBextractor对象中 3. 词袋模型参数,用于跟踪失败情 ...

  8. linux redhat 打开防火墙中的某个端口

    服务器成功监听了一个端口(如 5500),但是外面连接不进来,telnet其端口不通,解决办法如下(在root用户下): $ /sbin/iptables -I INPUT -p tcp --dpor ...

  9. 小白学习mysql 之 innodb locks

    Innodb 锁类型: Shared and Exclusive Locks Intention Locks Record Locks Gap Locks Next-Key Locks Insert ...

  10. html5判断设备的动作

    相应的事件 deviceorientation事件提供设备的物理方向信息,表示为一系列本地坐标系的旋角. devicemotion事件提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标.其还 ...