小强的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, ...
随机推荐
- 【阿里聚安全·安全周刊】Google“手枪”替换 | 伊朗中央银行禁止加密货币
本周七个关键词:Google"手枪"替换丨IOS 漏洞影响工业交换机丨伊朗中央银行禁止加密货币丨黑客针对医疗保健丨付费DDoS攻击丨数据获利的8种方式丨MySQL 8.0 正式版 ...
- 【DotNet加密方式解析】-- 好文收藏
By -- 彭泽 一. DotNet加密方式解析--散列加密 笔记: 散列加密种类: 1.MD5 128位 2.SHA-1 160位 3.SHA-256 256位 4.SHA-384 384位 ...
- 从头开始搭建一个VSCode+NetCore的项目
看这个前,先要对VS开发C#有所了解 获取作案工具 NetCore SDK https://www.microsoft.com/net/learn/get-started/windows 安装 建立工 ...
- python学习之路网络编程篇（第五篇）
paramiko简介 paramiko 是基于Python实现的SSH2远程安装连接,支持认证及秘钥方式.可以实现远程命令执行.文件传输.中间SSH代理等功能. paramiko安装 #!/bin/b ...
- Check the string CodeForces - 960A
A has a string consisting of some number of lowercase English letters 'a'. He gives it to his friend ...
- OpenResty修改Nginx默认autoindex页面
Nginx的autoindex 命令可以自动列出目录下的文件,一些网站用这个功能做文件下载,但是Nginx又没有提供这个页面的 自定义的功能,后来看到别人提及 ngx_openresty,才想到 bo ...
- Velocity 语法及其在springMVC中的配置
强烈推荐具体的整合博客:http://blog.csdn.net/duqi_2009/article/details/47752169 整合文章中有几处问题: xml中配置的vm视图解析器,应该按照本 ...
- OpenCV+OpenGL 双目立体视觉三维重建
0.绪论 这篇文章主要为了研究双目立体视觉的最终目标--三维重建,系统的介绍了三维重建的整体步骤.双目立体视觉的整体流程包括:图像获取,摄像机标定,特征提取(稠密匹配中这一步可以省略),立体匹配,三维 ...
- EBS系统管理常用SQL语句整理汇总（参考网上资料&其他人博客）
--1查找系统用户基本信息 SELECT user_id, user_name, description, employeE_id, person_party_id FROM fnd_user; -- ...
- springMVC源码分析--DispatcherServlet请求获取及处理
在之前的博客springMVC源码分析--容器初始化(二)DispatcherServlet中我们介绍过DispatcherServlet,是在容器初始化过程中出现的,我们之前也说过Dispatche ...