小强的HTML5移动开发之路（10）——在线画板
来自：http://blog.csdn.net/dawanganban/article/details/18094557
在这一篇文章中我们用html5来实现一个在线的画板，玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦，效果如下图所示：
过程很简单直接上代码了：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>大碗干拌的在线画板</title>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <style type="text/css">
- #php100{ border:1px solid #ccc;}
- </style>
- </head>
- <body>
- <canvas id="php100" width="500" height="400"></canvas>
- <script type="text/javascript">
- var canvas = document.getElementById('php100');
- var p100=canvas.getContext("2d");
- p100.lineWidth=5
- p100.strokeStyle="red";
- var paint=0;
- $("#php100").mousedown(function(e){
- var mouseX = e.pageX - this.offsetLeft;
- var mouseY = e.pageY - this.offsetTop;
- paint=1;
- p100.moveTo(mouseX,mouseY); //起始位置
- });
- $("#php100").mouseup(function(e){
- paint=0;
- });
- $("#php100").mousemove(function(e){
- var mouseX = e.pageX - this.offsetLeft;
- var mouseY = e.pageY - this.offsetTop;
- if(paint){
- p100.lineTo(mouseX,mouseY); //终止位置
- p100.stroke(); //结束图形
- }
- });
- </script>
- </body>
- </html>
有兴趣的朋友可以进行扩展，添加几个按钮可改变画板颜色或者其他好玩的功能。
小强的HTML5移动开发之路（10）——在线画板的更多相关文章
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
- 小强的HTML5移动开发之路（49）——HTML5开发神器HBuilder
今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.net.cn/ 一.新建文件 可以看到支持web app开发和普通网站前端开发,我们首先建立 ...
- 小强的HTML5移动开发之路（21）—— PhoneGap
一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android, ...
随机推荐
- 纯CSS菜单样式，及其Shadow DOM，Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- Spring + mybatis 集成
具体项目可参照:https://github.com/LuoXiaoyi/springmvc 一.环境准备:Spring4.3.5 + Mybatis3.4.6 + Mybatis-Spring 1. ...
- PHP AJAX 简介
AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是什么? AJAX = Asynchronous JavaScript and XML. AJAX ...
- lucene创建索引
创建索引. 1.lucene下载. 下载地址:http://archive.apache.org/dist/lucene/java/. lucene不同版本之间有不小的差别,这里下载的是lucene ...
- Docker与容器
Docker介绍 1. Docker 主要解决什么问题 Docker 对外宣称的是Build.Ship 和Run,Docker 要解决的核心问题就是快速地干这三件事情.它通过将运行环境和应用程序打包到 ...
- 针对于Python的OpenCV环境搭建
OpenCV 依赖 下载OpenCV 配置 总结 给Python搭建opencv的环境还真是略嫌麻烦,于是做下笔记,以备不时之需. OpenCV 依赖 opencv有些依赖,我们必须安装一下,否则接下 ...
- Java 8 新特性之 Lambda表达式
Lambda的出现就是为了增强Java面向过程编程的深度和灵活性.今天就来分享一下在Java中经常使用到的几个示例,通过对比分析,效果应该会更好. – 1.实现Runnable线程案例 其存在的意义就 ...
- Android简易实战教程--第十八话《ListView显示，简单的适配器SimpleAdapter》
本篇介绍Listview的显示,对于listview有许多的适配器,如ArrayAdapter,BaseAdapter,SimpleAdapter等等.本篇先热身一下,介绍最简单的SimpleAdap ...
- memcached实战系列(五)Memcached: List all keys 查询所有的key
memcached可能当时设计的时候就把它定位为内存性的kv结构的缓存系统.所以没有持久化到磁盘的命令,也没有查看所有key的值得命令.可能觉得没必要吧,你要是缓存1个G内存的数据,自己都头大,还敢看 ...
- 转义字符\（在hive+shell以及java中注意事项）：正则表达式的转义字符为双斜线,split函数解析也是正则
转义字符 将后边字符转义,使特殊功能字符作为普通字符处理,或者普通字符转化为特殊功能字符. 各个语言中都用应用,如java.python.sql.hive.shell等等. 如sql中 "\ ...