网络涂鸦板

之前写这篇文章的时候,就是本来打算写一个有网络涂鸦板功能的web群聊,不过涂鸦板一直是拖到现在才实现,鉴于现在实现的不是很完美就没有把它们合一起了,可以在这里看到效果。

这个网络涂鸦板,是所有人都能看到其他人画了什么,是实时同步的,刷新后就重置了。就是说比如你可以和你的朋友都打开这个页面,然后你绘制的情况,你的朋友也会看到。

注意到网址里其实有个id=1的东西,就是说这个你可以随便写个数字,就相当于创建一个房间了,不同房间的涂鸦板互不影响的。简单来说一下实现吧。

正如开头的图片显示的那样,主要的技术是利用了html5的canvas来绘图的,非常方便,然后整个绘图其实就是在绘制一段一段的线段,然后这是绘制一段线段的写法。

function draw(x1,y1,x2,y2){
context.strokeStyle = "#FF0000";
context.lineJoin = "round";
context.lineWidth = 3;
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.stroke();
}

可以指定画笔的颜色和粗细,非常的方便,基本绘制出来是这个样子的。

然后利用jquery,给鼠标事件加入了监听,使得移动鼠标时坐标位置会被记录下来。mousedown,mousemove和mouseup基本就能搞定涂鸦板了,至于剩下的就是利用原来使用过的comet长连接了,这样网络涂鸦板就算完成了。

不过毕竟是基于http的,而且每次绘制过长都需要传输大量的坐标信息,这样每次都需要http连接,进行三次握手,所以绘制起来,同步不是很流畅,相对于websocket来说建立连接可以一直保持还是有很多劣势的,所以既然都用了html5的canvas,过段时间也来看看websocket吧,这样会使得流畅很多呢。

您可能喜欢:
我猜您可能还喜欢:
, ,

有 5 条《网络涂鸦板》的回复

  1. protected/backend.php 无限load了

发表回复