kadai.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ベーステンプレート</title> </head> <body> <section> <h1>Canvas</h1> <nav> <!-- 線の色を変更するHTML要素 --> <!-- 線の太さを変更するHTML要素 --> <button id="clear_btn">クリアー</button> </nav> <canvas id="drowarea" width="500" height="500" style="border:1px solid blue;"></canvas> <!-- 文字の太さを変更 --> <form method="post"> <label>文字の太さを変更<input id="slide" type="range" name="range" min="1" max="10" value="1" onchange="showValue"></label> <span id="slide_value">1</span> <!-- <input type="submit" value="送信"> --> </form> <form method="post"> <label>色変更<input type="color" name="color" id="test"></label> </form> </section> <!-- <script src="js/jquery-2.1.3.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- <script type="text/javascript"></script> --> <script src="/socket.io/socket.io.js"></script> <script> $(function() { //初期化 var canvas_mouse_event = false; //スイッチ [ true=線を引く, false=線は引かない ] var oldX = 0; //1つ前の座標を代入するための変数 var oldY = 0; //1つ前の座標を代入するための変数 var bold_line = 3; //ラインの太さをここで指定 var color = "#000"; //ラインの色をここで指定 var sss = 0; var can = $("#drowarea")[0]; //CanvasElement var context = can.getContext("2d"); //描画するための準備! var socket = io.connect(); //サーバーからのメッセージ受信 socket.on('send user', function(data) { //.〇〇はJSONデータのkeyの部分から情報を得ている。ここは結果論でしかない context.strokeStyle = data.color; context.lineWidth = data.line //JSONデータのkeyがlineで値はbold_line context.beginPath(); context.moveTo(data.ox, data.oy); //JSONのkeyはoxで値はoldX context.lineTo(data.tx, data.ty); //JSONのkeyはtxで値はpx context.stroke(); context.closePath(); }); socket.on('clear user', function() { //受信用のクリア情報かな? context.clearRect(0, 0, can.width, can.height); }); //MouseDown:フラグをTrue //----------------------------------------------- //$(can).on("mousedown", function(e){ //oldX = e.offsetX; //MOUSEDOWNしたX横座標取得 //oldY = e.offsetY - txy; //MOUSEDOWN Y高さ座標取得 //canvas_mouse_event=true; //}); //----------------------------------------------- //上5つのスクリプトを記述します。 $(can).on("mousedown", function(e) { oldX = e.offsetX; //「eはevent」で、eの中のつまりcanvasの中の座標を取得する。 oldY = e.offsetY; //mousedownしたy座標を取得 canvas_mouse_event = true; //フラグ、スイッチの発送はよく使う }); $(can).on("mousemove", function(e) { if (canvas_mouse_event == true) { draw(e); } }); $(can).on("mouseup", function() { canvas_mouse_event = false; }); $("#clear_btn").on("click", function() { socket,emit('clear send'); context.beginPath(); //指定した領域を消す context.clearRect(0, 0, can.width, can.height); //can.widthにすると自動的取ってくる。 }); $("#slide").on("change", function() { bold_line = $(slide).val(); sss = bold_line; }); function showValue() { $("#input1").html("#slide"); } $("#slide").on("change", function() { $("#slide_value").html($(this).val()); }); $("#test").on("change", function() { color = $(test).val(); }); $(can).on("mouseout", function() { canvas_mouse_event = false; }); function draw(e) { var px = e.offsetX; var py = e.offsetY; context.strokeStyle = color; context.lineWidth = bold_line; context.beginPath(); //初期化 context.lineJoin= "round"; //これがないと線が線画ギザギザになる context.lineCap = "round"; //これがないと線が線画ギザギザになる context.moveTo(oldX, oldY); //開始地点 context.lineTo(px, py); //行き先地点 context.stroke(); context.closePath(); //pathを閉じて、この間を繰り返す socket.emit('server send', {"ox": "oldX", "oy": "oldY", "tx": "px", "ty": "py", "color": "color", "line": "bold_line"}); oldX = px; //現在の座標は古い座標になるので現在の座標を古い座標に代入する。 oldY = py; } }); </script> </body> </html>
app.js
var http = require( 'http' ); // HTTPモジュール読み込み var socketio = require( 'socket.io' ); // Socket.IOモジュール読み込み var fs = require( 'fs' ); // ファイル入出力モジュール読み込み // 3000番ポートでHTTPサーバーを立てる var server = http.createServer( function( req, res ) { res.writeHead(200, { 'Content-Type' : 'text/html' }); // ヘッダ出力 res.end( fs.readFileSync('./kadai.html', 'utf-8') ); // index.htmlの内容を出力 }).listen(3000); // サーバーをソケットに紐付ける var io = socketio.listen(server); io.sockets.on('connection', function(socket) { //クライアントからのメッセージ受信 socket.on('clear send', function() { //自分以外の全員に送る socket.broadcast.emit('clear user'); }); //クライアントからのメッセージ受信 socket.on('server send', function(data) { //自分以外の全員に送る socket.broadcast.emit('send user', data); }); // 切断 socket.on('disconnect', function() { io.sockets.emit('user_disconnected'); }); });
お絵かきチャットですが、上手く動作していません。アドバイスいただけると!
あなたの回答
tips
プレビュー