使用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. 机器学习基础之knn的简单例子

    knn算法是人工智能的基本算法,类似于语言中的"hello world!",python中的机器学习核心模块:Scikit-Learn Scikit-learn(sklearn)模 ...

  2. python 复习函数 装饰器

    # 函数 —— 2天 # 函数的定义和调用 # def 函数名(形参): #函数体 #return 返回值 #调用 函数名(实参) # 站在形参的角度上 : 位置参数,*args,默认参数(陷阱),* ...

  3. js bom和dom

    一, 前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM ...

  4. 20145202马超 2006-2007-2 《Java程序设计》第2周学习总结

    20145202马超 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第三章主要讲了各种变量的设置以及流程控制,基本上都和c是一样的.print是不太一样的, ...

  5. CSS实现简易的轮播图

    <html> <head> <meta charset="UTF-8"> <title></title> <sty ...

  6. Python进程、线程、协程及IO多路复用

    详情戳击下方链接 Python之进程.线程.协程 python之IO多路复用

  7. Gradle下载及安装教程

    Gradle是基于Groovy语言的项目自动化建构工具,在使用Gradle之前常用的构建工具有Ant和Maven,使用这些工具我们可以用来管理项目依赖,打包,部署和发布等.使用Gradle我们将需要的 ...

  8. Leetcode 679.24点游戏

    24点游戏 你有 4 张写有 1 到 9 数字的牌.你需要判断是否能通过 *,/,+,-,(,) 的运算得到 24. 示例 1: 输入: [4, 1, 8, 7] 输出: True 解释: (8-4) ...

  9. java调c# exe 程序,exe里写文件问题

    应用场景描述: java web程序,触发 调用c#写的后台exe程序,发现exe里写的文件找不到.单独在cmd命令行下执行exe没问题: 问题查找: 由于exe里获取文件路径错误导致: 解决方法: ...

  10. 官方文档 恢复备份指南八 RMAN Backup Concepts

    本章内容 Consistent and Inconsistent RMAN Backups Online Backups and Backup Mode Backup Sets Image Copie ...