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，繪圖就算解決了，下面要解決的就是客戶端的管理與同步了