Skip to content

Instantly share code, notes, and snippets.

@mactkg
Created November 21, 2011 10:51
Show Gist options
  • Save mactkg/1382297 to your computer and use it in GitHub Desktop.
Save mactkg/1382297 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>mind-catch</title>
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
var canvas;
var context;
var socket;
var sid;
var drawing;
var old_x = 0;
var old_y = 0;
function init(room, user_name){
socket = new WebSocket("ws://glasssaga.dip.jp:6743/?room="+room+"&user="+user_name);
socket.onerror = function(){
alert("エラーが発生しました");
}
socket.onmessage = function(evt){
switch(evt.data){
case "used_name": // ユーザ名が重複していた場合
alert("このユーザ名は既に使われています。");
return;
case "image_req": // 画像データのリクエストを受けたら送信
socket.send(JSON.stringify({
"image_data" : canvas.toDataURL("image/png")
}));
break;
}
var data = JSON.parse(evt.data);
if(data["sid"]){
sid = data["sid"];
} else if(data["image_data"]){ //画像データを受信したら描画
load_image(data["image_data"]);
} else {
draw.apply(null, JSON.parse(evt.data));
}
}
canvas = document.getElementById('main_canvas');
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", function(e){
drawing = true;
old_x = e.clientX;
old_y = e.clientY;
});
canvas.addEventListener("mouseup", function() { drawing = false; });
canvas.addEventListener("mouseout", function() { drawing = false; });
canvas.addEventListener("mousemove", function(e){
if(drawing){
var x = e.clientX;
var y = e.clientY;
socket.send(JSON.stringify([old_x, old_y, x, y]));
draw(old_x, old_y, x,y);
old_x = x;
old_y = y;
}
});
}
function draw(from_x, from_y, to_x, to_y){
var canvas = document.getElementById('main_canvas');
var context = canvas.getContext("2d");
context.strokeStyle = "rgba(255,0,0,1)";
context.lineWidth = 1;
context.beginPath();
context.moveTo(from_x, from_y);
context.lineTo(to_x, to_y);
context.stroke();
context.closePath();
}
function load_image(image_data){
var image = new Image();
image.onload = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, image.width, image.height);
}
image.src = image_data;
}
function join(){
var room = document.forms[0]["room"].value;
var user_name = document.forms[0]["user_name"].value;
init(room, user_name);
}
</script>
</head>
<body>
<canvas id="main_canvas" width="640" height="480"></canvas>
<form name="form1" action="#">
<input type="text" name="room">
<input type="text" name="user_name">
<input type="button" value="入室" onclick="join()">
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment