HTML5 Canvas 不画线。 WebSockets 共享画布板

Posted 2023-02-16

【中文标题】HTML5 Canvas 不画线。 WebSockets 共享画布板

【英文标题】：HTML5 Canvas does not draw lines. WebSockets sharing canvas board

【发布时间】：2018-03-27 06:30:59

【问题描述】：

希望你会很好。我正在制作一个与画布和网络套接字共享的简单板（服务器上的 Java，而不是节点）。我已经将抽奖分享给进入网页的不同客户。问题是，当我们绘制时，画布开始像这样绘制......（见图）

CANVAS WRONG DRAWING

我不知道为什么。我正在使用 json 将 mousemove 和 mousedown 坐标发送到服务器，它返回我发送的相同 jsons 坐标......我认为问题是当我收到响应时，画布没有正确绘制。

这是我的画布代码：

$(document).ready(() => 
    console.log("THE DOC IS READY :)");
    drawing();
    connect();
);

var start = ;
var draw = ;
var close = ;
var myCanvas;
var ctx;
var dimensionProps;

function drawing() 
    myCanvas = document.getElementById("canvas");
    ctx = myCanvas.getContext("2d");
    setProps(myCanvas, 800, 500);
    dimensionProps = 
        left: myCanvas.offsetLeft,
        top: myCanvas.offsetTop
    ;
    if (myCanvas) 
        let mouseisDown = false;
        var cPosX, cPosY;
        ctx.lineWidth = 5;
        $(myCanvas).mousedown((e) => 
            mouseisDown = true;
            start.x = e.pageX;
            start.y = e.pageY;
            console.log("start"+JSON.stringify(start))
            sendDraw(start);
            //startDraw(start.x,start.y)
        ).mousemove((e) => 
            if (mouseisDown) 
                draw.x = e.pageX;
                draw.y = e.pageY;
                console.log("drawing"+JSON.stringify(draw))
                sendDraw(draw);
                //drawingCanvas(draw.x,draw.y)
            
        ).mouseup((e) => 
            mouseisDown = false;
        );
    
    clear(ctx, myCanvas);


const setProps = (canvas, w, h) => 
    canvas.width = w;
    canvas.height = h;


const clear = (ctx, canvas) => 
    $("#clear-btn").click(() => 
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    );


// cross-browser canvas coordinates
const drawingPos = (pPos, dProps) => ((pPos) - (dProps));

这是 websocket（我从 java 后端收到的坐标是“onmessage”）：

var ws;

const sendDraw = (coord) => ws.send(JSON.stringify(coord));

const close = () => ws.close;

function connect() 
    ws = new WebSocket("ws://" + location.host + "/Board_Project/chatsv");

    ws.onmessage = (e) =>    
        var mydraw = JSON.parse(e.data);
        console.log("this is what i received " + JSON.stringify(mydraw)); //the same coordiantes that I send
        startDraw(mydraw.x,mydraw.y);
        drawingCanvas(mydraw.x, mydraw.y);
        //endDraw();
      

    ws.onopen = (e) =>   
        console.log("SUCCESSFULLY CONNECTION");
    

    ws.onclose = (e) => 
        if (ws.readyState === WebSocket.OPEN) 
            console.log("THE CONNECTION HAS FINISHED");
        
    

    ws.onerror = (e) => 
        console.log("error al conectar");
    
   

const startDraw = (x, y) => 
    ctx.beginPath();
    ctx.strokeStyle = "black"; 
    cPosX = x - dimensionProps.left;
    cPosY = y - dimensionProps.top;
    //ctx.moveTo(x,y); //it works
    ctx.moveTo(cPosX,cPosY);


const drawingCanvas = (x, y) => 
    cPosX = x - dimensionProps.left;
    cPosY = y - dimensionProps.top;     
    ctx.lineTo(cPosX+10,cPosY+10);
    ctx.stroke();


const endDraw = () => ctx.closePath();

我不发布java服务器的代码，因为它只获取json，然后再次发送。所以我认为没有必要发布它..

希望你能帮助我！

谢谢！

【参考方案1】：

您说“服务器只获取 json，然后再次发送。”

嗯，关键是你需要在 ws.onmessage 时使 mousemove 与 mousedown 不同。

你的 webSocket 无法区分 mousedown 和 mousemove。 mousedown 和 mousemove 侦听器都调用 sendDraw()。

 $(myCanvas).mousedown((e) => 
    mouseisDown = true;
    /* ...*/
    sendDraw(start);
    //startDraw(start.x,start.y)
).mousemove((e) => 
    if (mouseisDown) 
        /* ...*/
        sendDraw(draw);
        //drawingCanvas(draw.x,draw.y)
    
)

当您的 webSocket 从服务器收到消息时，它总是会同时调用 startDraw() 和 drawingCanvas()。 无论是由 mousemove 还是 mousedown 触发。

ws.onmessage = (e) => 
    var mydraw = JSON.parse(e.data);
    console.log("this is what i received " + JSON.stringify(mydraw)); //the same coordiantes that I send
    startDraw(mydraw.x,mydraw.y);
    drawingCanvas(mydraw.x, mydraw.y);
    //endDraw();
  

所以，你可以使用 ws.onmessage 的 mouseisDown 或者在调用 sendDraw 时添加一些标签。

ws.onmessage = (e) => 
    var mydraw = JSON.parse(e.data);
    if(mouseisDown)
        drawingCanvas(mydraw.x, mydraw.y);
     else 
        startDraw(mydraw.x,mydraw.y);
    
    //endDraw();
  

【讨论】：

嗨@Guest，你说的有效，现在我可以得到完整的图纸了。但是现在，它没有显示我在另一个客户端中绘制的内容（我仍然从服务器接收带有坐标的 json，如果我删除了我工作的条件，但是我在问题中指定的方式）。也许对于有条件的，我尝试过声明一个标志，但它不起作用。谢谢，希望你能回答我

@TELPRO 尝试添加 sendDraw(start, state) 的标签。 （状态——例如——可以是“startDraw”或“drawing”）。将状态传递给服务器并发送给客户端。 if(mydraw.state == 'drawing') drawingCanvas(/**/); else if (mydraw.state == 'startDraw') startDraw(/**/);

天哪！非常感谢你！！它奏效了，它是如此简单，我以前尝试过类似的方法，但没有奏效。再次感谢你！ +1

@TELPRO 很高兴为您提供帮助