html画图web,基于html5 websocket和canvas的多人画图程序（你画我猜）

演示地址：http://letdraw.ap01.aws.af.cm/

项目代码：https://github.com/mz121star/WebsocketPaint

自己访问的话可以打开多个浏览器窗口体验，目前有个问题就是不能多人同时画，否则出现问题

1.[代码][JavaScript]代码

io.sockets.on('connection', function (socket) {

socket.emit('draw', { hello:'world' });

socket.on('draw', function (data) {

console.log(data);

socket.broadcast.emit('draw', data);

});

socket.on('set nickname', function (name) {

socket.set('nickname', name, function () {

//socket.broadcast.emit('add user',socket.manager.roomClients);

socket.emit('add user', socket.manager.roomClients);

socket.broadcast.emit('add user', socket.manager.roomClients);

//console.log(socket);

});

});

socket.on("msg", function (data) {

if (data.id) {

io.sockets.socket(data.id).emit("msg", socket.store.data.nickname + "对你说：" + data.msg)

}

else {

socket.broadcast.emit("msg", socket.store.data.nickname + "对大家说：" + data.msg);

}

});

});

2.[代码][JavaScript]代码

$("#graph").MPaint({

drawReady: function (e) {

socket.emit('draw', { sx: e.offsetX, sy: e.offsetY,color: $("#graph").MPaint.GetColor() });

},

drawBegin: function (e) {

socket.emit('draw', { ex: e.offsetX, ey: e.offsetY,color: $("#graph").MPaint.GetColor() });

snd.play();

},

drawEnd: function (e) {

}

});

3.[代码][JavaScript]代码

(function ($, window) {

var ctx;

$.fn.MPaint = function (opts) {

var opts = $.extend({}, $.fn.MPaint.defaults, opts), begin = false;

var _moveTo = function (e) {

begin = true;

ctx.beginPath();

ctx.moveTo(e.offsetX, e.offsetY);

opts.drawReady(e);

}

, _drawBegin = function (e) {

if (begin) {

ctx.lineTo(e.offsetX, e.offsetY);

ctx.stroke();

opts.drawBegin(e);

}

}

, _drawEnd = function (e) {

begin = false;

opts.drawEnd;

};

return this.each(function () {

var canvas = $(this);

if (canvas[0].getContext) {

ctx = canvas[0].getContext('2d');

ctx.strokeStyle = opts.BrushColor;

ctx.lineWidth = opts.BrushWidth;

ctx.lineJoin = opts.LineJoin;

}

canvas.on("mousedown", _moveTo);

canvas.on("mousemove", _drawBegin);

canvas.on("mouseup", _drawEnd);

})

};

var Methods = {

SetColor:function (color) {

ctx.strokeStyle = color;

},

GetColor:function (color) {

return ctx.strokeStyle ;

},

SetWidth:function(w){

ctx.lineWidth=w;

},

SaveImage:function(){

var data =ctx.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

window.location.href = data;

}

}

$.fn.MPaint.defaults = {

BrushColor:"#fff",

BrushWidth:5,

LineJoin:"round",

//mousedown

drawReady:function (e) {

},

//Mousemove

drawBegin:function (e) {

},

//mouseup

drawEnd:function (e) {

}

}

$.extend($.fn.MPaint,Methods);

})(jQuery, window)