Node学习笔记(三):基于socket.io web版你画我猜(一)

经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法

首先说下思路,在做准备工作的时候,有两个大概的思路:

1.规定一块div,捕捉鼠标事件,动态生成position absolute,长宽1px的红色小div,这样可以模拟出划线的轨迹,做一个long polling,不断获取DOM结构,推送到socket端口,然后再广播给所有客户端

2.利用canvas作图,将canvas的数据推送到socket端口,广播所有客户端

其实之所以有两种想法,无非就是作图这块出现了分歧,方法一,大量DOM树的重绘,无疑会给浏览器造成巨大的负担,但是canvas作图,也苦于数据无法导出,但是功夫不负有心人,canvas的数据流是可以通过toDataURL()导出数据的,于是开动!

var paint=false;//判断是否是需要绘画
var container=document.getElementById(‘container‘)
var context=container.getContext("2d")
var mouseX=0,mouseY=0,nowX=0,nowY=0;//存储坐标记录

做一个对象对事件进行汇总,包含对position的替换重置,canvas的绘制及重绘,导出数据

var position={
		reset:function(actionX,actionY,goalX,goalY){  //坐标替换
			paint=true;
			var order=" "+actionX+"="+goalX+","+actionY+"="+goalY;
			eval(order);
			console.log(mouseX);
		},
		init:function(){        //坐标清零
			console.log("init");
			paint=false;
			mouseX=0;
			mouseY=0;
			nowX=0;
			noxY=0;
		}
	}
	var canvas={
		init:function(){     //canvas初始化
			context.strokeStyle = "blue";
	                context.strokeRect(0,0,300,200);
	                context.stroke();
		},
		draw:function(lastX,lastY,nowX,nowY){    //canvas划线
				context.lineWidth = 1;
				context.beginPath();
				context.moveTo(lastX, lastY);
				context.lineTo(nowX,nowY);
				context.stroke();
				position.reset(‘mouseX‘,‘mouseY‘,nowX,nowY);
		},
		redraw:function(){    //canvas重绘
			position.init();
		},
		returnData:function(){        //canvas导出数据流
			socket.emit(‘startConnect‘, container.toDataURL())
		}
	}

绘图最重要的就是对坐标的处理,我们在鼠标点击的时候记录点击时的坐标,存储起来付给mouseXY,在mousemove的时候记录坐标付给NowXY,用lineto进行绘线,鼠标点击弹起时,paint置为false 停止绘画

$("#container").mousedown(function(e){
		position.reset(‘mouseX‘,‘mouseY‘,e.pageX-this.offsetLeft,e.pageY-this.offsetTop);
		console.log(mouseX+":"+mouseY);
	})
	$("#container").mousemove(function(e){
		if(paint){
			console.log(mouseX+":"+mouseY);
			position.reset(‘nowX‘,‘nowY‘,e.pageX-this.offsetLeft,e.pageY-this.offsetTop);
			canvas.draw(mouseX,mouseY,nowX,nowY);
		}
	})
	$("#container").mouseup(function(e){
		if(paint){
			position.init();
			canvas.returnData();
		}
	})
	$("#container").mouseleave(function(e){
		if(paint){
			position.init();
		}

	})

效果如图 

ok,绘图就算解决了,下面要解决的就是客户端的管理与同步了

时间: 2024-10-12 11:44:06

Node学习笔记(三):基于socket.io web版你画我猜(一)的相关文章

linux学习笔记——搭建基于nginx的web服务器、多核配置、nginx配置参数

############ 认识nginx #############Nginx:(发音同 engine x)是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,最初供俄国大型的入口网站及搜寻引擎Rambler(俄文:Рамблер)使用.  其优点是轻量级(占有内存少),高并发(并发能力强),事实上nginx的并发能力确实在同类型的网页伺服器中表现较好.目前中国大陆使用ngi

Node学习笔记三

global --类似与客户端javascript运行环境中的window process --用于获取当前node进程信息,一般用于获取环境变量之类的信息 console --node中内置的console模块,提供操作控制台的输入输出功能,常见是用方式与客户端类似 node中只有这三个是真正的全局对象,其他的一些全局对象都是模块内的伪全局对象 在查看api时,会看到如此提示,node会将方法的稳定性分为三个级别0.1.2,0代表稳定性最低,2代表稳定性最高. --由于一些api已经被淘汰,但

学习笔记三十三:IO流(四)

一无所有是一种财富,它让穷人产生改变命运的行动. 本讲内容:RandomAccessFile RandomAccessFile是用来访问那些保存数据记录的文件的,你就可以用seek( )方法来访问记录,并进行读写了.这些记录的大小不必相同:但是其大小和位置必须是可知的.但是该类仅限于操作文件. RandomAccessFile不属于InputStream和OutputStream类系的.实际上,除了实现DataInput和DataOutput接口之外(DataInputStream和DataOu

转 网络编程学习笔记一:Socket编程

网络编程学习笔记一:Socket编程 “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠socket?那什么是socket?socket的类型有哪些?还有socket的基本函数,这些都是本文想介绍的.本文的主要内容如下:

Servlet3.0学习总结(三)——基于Servlet3.0的文件上传

Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileupload组件,在Servlet3.0中提供了对文件上传的原生支持,我们不需要借助任何第三方上传组件,直接使用Servlet3.0提供的API就能够实现文件上传功能了. 一.使用Servlet3.0提供的API实现文件上传 1.1.编写上传页面 1 <%@ page language="jav

基于Socket创建Web服务

基于Socket创建Web服务 为什么要使用Socket呢,我们来看下图 Socket原理图回顾: -------------------编写SocketService,完成字母小写转大写功能----------------------------- ServerSocket服务器端代码如下: public static void main(String[] args) throws IOException { // 1:建立服务器端的tcp socket服务,必须监听一个端口 ServerSo

马哥学习笔记三十二——计算机及操作系统原理

缓存方式: 直接映射 N路关联 缓存策略: write through:通写 write back:回写 进程类别: 交互式进程(IO密集型) 批处理进程(CPU密集型) 实时进程(Real-time) CPU: 时间片长,优先级低IO:时间片短,优先级高 Linux优先级:priority 实时优先级: 1-99,数字越小,优先级越低 静态优先级:100-139,数据越小,优先级越高 实时优先级比静态优先级高 nice值:调整静态优先级   -20,19:100,139   0:120 ps

lucene学习笔记(三)

好几天没更新了.更新一下,方便自己和大家学习. 这是最基本的代码 package index; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.Map; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Document;

Lua学习笔记(三):表的构造

构造器是创建和初始化表的表达式.表是Lua特有的功能强大的东西.最简单的构造函数是{},用来创建一个空表.可以直接初始化数组: 1 days = {"Sunday", "Monday", "Tuesday", "Wednesday", 2 "Thursday", "Friday", "Saturday"} Lua将“Sunday”初始化days[1](第一个元素索引为