node服务器的搭建还是和前面的一样,没有任何改动,也可以把环境搭建在自己的公网服务器上,做到真正的同时实时绘画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
    canvas{
        background-color: red;
    }
</style>
</head>
<body>
<canvas width="800" height="500"></canvas>
</body>
</html>
<script>
let websocket = new WebSocket("ws://localhost:8080");
let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");//拿到一个2d的环境
// context.beginPath();//将要绘制一个路径,开始划线了
// context.moveTo(0,0) //告诉canvas画图的起点在哪里
// context.lineTo(400,250);//终点  终点可以是多个
// context.lineTo(800,0);
// context.closePath();//闭合路径,闭合以后可以画第二条
// context.stroke();//以划线的方式画
//乱画的写法
context.lineWidth = 30;//线条宽度
context.lineCap = "round"; //线条圆润一些;
context.lineJoin = "round"; //拐弯处圆润一些;
context.strokeStyle = "white";  //线条的颜色
websocket.onmessage=function(e){
    //通过返回过来的数据判断是终点还是起点
    let point = JSON.parse(e.data);
    if(point.flag=="s"){
        context.beginPath();
        context.moveTo(point.x,point.y);
    }else if(point.flag=="e"){
        context.lineTo(point.x,point.y);
        context.stroke();
    }
}
canvas.onmousedown=function(e){
    //发送一个json对象的字符串来区别是起点还是重点
    websocket.send(JSON.stringify({flag:"s",x:e.layerX,y:e.layerY}));
    document.onmousemove=function (e){
        websocket.send(JSON.stringify({flag:"e",x:e.layerX,y:e.layerY}));
    }
    context.closePath();
    document.onmouseup=function(e){
        document.onmousemove=null;
        document.onmouseup=null;
    }
}
</script>

这个方法还存在一个小问题就是,在一边刷新网页的时候,另一边不能实时清空前面所绘制的内容。可以通过点击按钮的时候给服务器发送一个信号,然后服务器把这个信号返回给连接的每个客户端,只要客户端接收到这个信号,通过刷新网页就好了。

websocket.send(JSON.stringify({flag:"r"}));
else if(point.flag=="r"){
        window.location.reload(); //刷新网页
Last modification:October 29th, 2019 at 02:43 pm
来杯coffee吧