你畫我猜---websocket
阿新 • • 發佈:2019-02-04
前段時間接觸了websocket,具體的就不介紹了,他就是與後臺建立長連線,完成資訊的傳送與接受,有興趣看我之前的blog或者google一下!之前完成了單聊與多聊的功能,分別實用tomcat7和tomcat8實現!那時候再想做個你畫我猜的小遊戲,但沒有時間!現在終於抽出時間做了一個,有點簡陋,看效果(程式碼是在在tomcat8的單聊與群聊基礎上新增的)
要選擇對放姓名,才可以繪製,對方實時顯示,但是有個問題,對方的畫板,不連續,因為不是以直線的方式繪製,而是已點的方式繪製(其實就是(x-1,y-1)lineTo(x,y)),傳過去的是個座標,現在就只想到這個方法
<span style="font-size:14px;"> var coordArry = o.data.split("_");
var x = coordArry[0];
var y = coordArry[1];
oGC.lineWidth = 1;
oGC.moveTo(x-1,y-1);
oGC.lineTo(x,y);
oGC.stroke();</span>
使用的是HTML5 的canvas,繪製直線的程式碼如下:
關於這個可以去W3C去學,那裡看起來簡單,但是非常的基礎,非常的重要<span style="font-size:14px;">var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke();</span>
你畫我猜就是把本地畫筆的實時座標傳送給對方,然後根據座標再繪製出來,思路很簡單,就是如何處理這些座標
程式碼沒有什麼改變,就是後臺加了個型別,前臺加個判斷,就ok了,程式碼不要錢了這次,上傳到GITHUB了!
對於以上提到的問題,以後有時間再改,馬上雙十一了,天天加班啊。,。。。。