小强的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, ...
随机推荐
- hive 集成 hbase NoClassDefFoundError: org/apache/htrace/Trace
更新了hive版本后,在创建hive外部表 级联hbase 的时候报如下异常: hive (default)> create external table weblogs(id string,d ...
- 我为什么放弃使用MyBatis3的Mapper注解
最近在使用MyBatis3做项目.在使用注解实现Mapper的时候遇到了比较奇葩的问题:在实现数据的batch insert的时候总是报错.好不容易可以正常插入了,但是又不能返回自增的主键id到实体b ...
- JBOSS EAP实战(1)
JBOSS的诞生 1998年,在硅谷SUN公司的SAP实验室,一个年轻人正坐在电脑前面思考,然后写着什么东西.不,他没有在写程序,他在写辞呈.他正在做出人生的一个重大决定:他要辞掉在SUN的这份工作, ...
- Jedis分片Sentinel连接池实验
Jedis分片Sentinel连接池实验 1.起因 众所周知,Redis官方HA工具Sentinel已经问世很久了,但令人费解的是,Jedis官方却迟迟没有更新它的连接池.到目前Maven库中最新的2 ...
- Java格式化时间
Java格式化时间 将秒或者毫秒值格式化成指定格式的时间 效果图 工具类 工具类里我只列出了一种格式的格式化方式,可以根据自己的需求,修改"yyyy-MM-dd hh:mm:ss" ...
- hive指定hadoop执行队列
指定队列的命令: 有三种: set mapred.job.queue.name=queue3; SET mapreduce.job.queuename=queue3; set mapred.queue ...
- Visual Studio 写自己的动态链接库（DLL）
有些时候,我们想写自己的函数库以避免重复写代码,此文介绍如何使用Visual Studio编写自己的动态链接库. 0,实验环境说明: 集成开发环境:Visual Studio 10.0 操作系统: W ...
- TV Metro界面（仿泰捷视频TV版）源码解析
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52822499 前言:上一篇介绍了 ...
- Hadoop学习笔记1：伪分布式环境搭建
在搭建Hadoop环境之前,请先阅读如下博文,把搭建Hadoop环境之前的准备工作做好,博文如下: 1.CentOS 6.7下安装JDK , 地址: http://blog.csdn.net/yule ...
- 【SSH系列】-- Hibernate持久化对象的三种状态
在上一篇博文中,小编主要简单的介绍了[SSH系列]--hibernate基本原理&&入门demo,今天小编来继续介绍hibernate的相关知识, 大家知道,Java对象的生命周期,是 ...