小强的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, ...
随机推荐
- python笔记六（函数的参数、返回值）
一 调用函数 在写函数之前,我们先尝试调用现有的函数 >>> abs(-9) 9 除此之外,还有我们之前使用的len()等.可以用于数据类型转换的 int() float() str ...
- MLDS笔记：Optimization
当函数空间覆盖到目标函数时,如何通过优化调整神经网络的参数找到这个目标函数呢? 深度学习中的损失函数是非凸的,非凸优化是个NP-hard问题,如何通过梯度下降来解决这个问题呢? 注意,不同于learn ...
- Windows下Java调用BAT批处理不弹出cmd窗口
常规Windows下Java调用BAT方式肯定会弹出cmd窗口 Runtime.getRuntime().exec("cmd.exe /C start D:\\test.bat") ...
- Web Worker Best Practices
使用Web Worker可以把一些比较计算量相对大的阻塞浏览器响应的计算放在单独的线程里计算. 请求优化 构造Worker的时候需要给定js的链接URL,worker内部请求js运行代码.假如work ...
- 20160218.CCPP体系详解(0028天)
程序片段(01):加法.c 内容概要:字符串计算表达式 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <st ...
- Freeline--Android平台上的秒级编译方案
Freeline 技术揭秘 Freeline是什么? Freeline是蚂蚁金服旗下一站式理财平台蚂蚁聚宝团队15年10月在Android平台上的量身定做的一个基于动态替换的编译方案,5月阿里集团内部 ...
- ssh用法及命令
http://blog.csdn.net/pipisorry/article/details/52269785 什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本 ...
- Swift基础之守卫语句guard
本篇文章翻译自:http://ericcerney.com/swift-guard-statement/原作者:ecerney该语法为swift2.0之后添加的新特性 最开始在Apple的Platfo ...
- Tomcat中的ssl安全信道的实现
为了实现https协议通信,tomcat需要利用JSSE把SSL/TLS协议集成到自身系统上,通过上一节我们知道不同的厂商可以实现自己的JSSE,而tomcat默认使用的是以前sun公司开发实现的包而 ...
- JQuery 网页选项卡制作
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库 选项卡原理 业务核心 完整小例子 引 ...