小强的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, ...

随机推荐

59. Spiral Matrix II(中等，同54题)
Given an integer $n$, generate a square matrix filled with elements from 1 to $n^2$ in spiral or ...
css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
解读Raft（二选举和日志复制）
Leader election Raft采用心跳机制来触发Leader选举.Leader周期性的发送心跳(如果有正常的RPC的请求情况下可以不发心跳)包保持自己Leader的角色(避免集群中其他节点认 ...
OpenCV RGB2LAB执行效率测试
代码 #include <iostream> #include <vector> #include <opencv2/opencv.hpp> #define ERR ...
git清空某个文件的历史版本
比如你要清空文件private.ini git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch priva ...
Docker容器时间与宿主机时间不一致
编写Dockerfile,在其中加入: RUN /bin/cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \ && echo ' ...
rbac数据库设计
1 rbac数据库设计 RBAC基于资源的访问控制(Resource-Based Access Control)是以资源为中心进行访问控制分享牛原创,分享牛系列,分享牛.rbac 用户角色权限资源表如 ...
Android线性布局
线性布局 LinearLayout 是一个视图组,用于使所有子视图在单个方向(垂直或水平)保持对齐. 您可以使用 android:orientation 属性指定布局方向. LinearLayout ...
[ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢? 目录目录 extjs的查询组件的API 查 ...
高性能的Redis代理TwemProxy
TwemProxy是一个Redis的中间件代理,具有很多有用的功能,可以暂时替代一部分Redis Cluster的功能: ² 支持和6479.之后相应地,配置好两个Redis实例并启动.现在就可以启 ...

小强的HTML5移动开发之路（10）——在线画板

小强的HTML5移动开发之路（10）——在线画板的更多相关文章

随机推荐

热门专题