Canvas socket.io中的图形数据_Canvas_Socket.io_Paperjs

Canvas socket.io中的图形数据

canvas socket.io

Canvas socket.io中的图形数据,canvas,socket.io,paperjs,Canvas,Socket.io,Paperjs,我在谷歌上搜索了一些解决方案，并尝试实现它们，但其中一些不起作用，有些对我来说很复杂。我试图实施一些解决方案，但都失败了我是这里的新手，想学习如何在最简单的示例上使用paper.js实现socket.io。复杂的东西把我弄糊涂了。我将在这里编写示例代码客户端： <!DOCTYPE html> <html> <head>  <script src="http://l

我在谷歌上搜索了一些解决方案，并尝试实现它们，但其中一些不起作用，有些对我来说很复杂。我试图实施一些解决方案，但都失败了

我是这里的新手，想学习如何在最简单的示例上使用paper.js实现socket.io。复杂的东西把我弄糊涂了。我将在这里编写示例代码

客户端：

    <!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script type="text/javascript" src="paper.js"></script>
</head>
<body>
<!-- Define inlined JavaScript -->
<script type="text/paperscript" canvas="Canv">
var socket = io.connect('http://localhost:3000');

var scope = new paper.PaperScope();
scope.setup(Canv);



var path;


    function onMouseDown(event) {
        path = new Path();
        path.strokeColor = 'black';
        path.add(event.point);

}


    onMouseDrag = function(event) {
        path.add(event.point);


    }



</script>



    <canvas id="Canv" width="900" height="500"
    style="position:absolute;top:10%;left:13%;border:1px solid;"> 
              </canvas>     
</body>
</html>

请改进它，以便它将发送图纸坐标。。。我看了很多教程，但都没看懂。

虽然这是个老问题。。以下是一个教程：

var io = require('socket.io'),
connect = require('connect');

var app = connect().use(connect.static('public')).listen(3000);
var socket = io.listen(app);