使用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了,所以在比较短的时间内 ...
随机推荐
- 机器学习基础之knn的简单例子
knn算法是人工智能的基本算法,类似于语言中的"hello world!",python中的机器学习核心模块:Scikit-Learn Scikit-learn(sklearn)模 ...
- python 复习函数 装饰器
# 函数 —— 2天 # 函数的定义和调用 # def 函数名(形参): #函数体 #return 返回值 #调用 函数名(实参) # 站在形参的角度上 : 位置参数,*args,默认参数(陷阱),* ...
- js bom和dom
一, 前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM ...
- 20145202马超 2006-2007-2 《Java程序设计》第2周学习总结
20145202马超 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第三章主要讲了各种变量的设置以及流程控制,基本上都和c是一样的.print是不太一样的, ...
- CSS实现简易的轮播图
<html> <head> <meta charset="UTF-8"> <title></title> <sty ...
- Python进程、线程、协程及IO多路复用
详情戳击下方链接 Python之进程.线程.协程 python之IO多路复用
- Gradle下载及安装教程
Gradle是基于Groovy语言的项目自动化建构工具,在使用Gradle之前常用的构建工具有Ant和Maven,使用这些工具我们可以用来管理项目依赖,打包,部署和发布等.使用Gradle我们将需要的 ...
- Leetcode 679.24点游戏
24点游戏 你有 4 张写有 1 到 9 数字的牌.你需要判断是否能通过 *,/,+,-,(,) 的运算得到 24. 示例 1: 输入: [4, 1, 8, 7] 输出: True 解释: (8-4) ...
- java调c# exe 程序,exe里写文件问题
应用场景描述: java web程序,触发 调用c#写的后台exe程序,发现exe里写的文件找不到.单独在cmd命令行下执行exe没问题: 问题查找: 由于exe里获取文件路径错误导致: 解决方法: ...
- 官方文档 恢复备份指南八 RMAN Backup Concepts
本章内容 Consistent and Inconsistent RMAN Backups Online Backups and Backup Mode Backup Sets Image Copie ...