本文主要是介绍web大作业（9）共享涂鸦的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
要实现教师端上传图片，进行标注并下发到学生端，需要使用websocket或socket.io。使用npm 安装socket.io。下面是教师端绘图和学生端绘图的网页源代码。
教师端：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘图</title>
</head>
<script src="jquery.js"></script>
<body><div class="paint"><canvas id="canvas" width="500" height="400" style="border:1px solid #c3c3c3;"></canvas></div><input accept="image/*" type="file" id="uploadIMG" onchange="btnUploadFile(event)"/>
</body>
<script src="./socket.io.js"></script>
<script>var socket = io("http://localhost:3000");socket.on('connect',function(){console.log('连接成功')})socket.on('disconnect',function(){console.log('断开连接')})function btnUploadFile(e,type){var files = e.target.files;var file = files[0];if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){return;}var reader = new FileReader();reader.onload = function() { var result = this.result; socket.emit("send",result)};reader.readAsDataURL(file); }socket.on('msg',function(data){var img=new Image()//console.log(data)img.src=data;var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//console.log(result)img.onload = function(){context.drawImage(img,0,0,500,400);}})window.onload=function(){var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");paint(context);}function paint(context){var temp = false;$("canvas").mousedown(function(e){temp=true;var x = e.pageX-8;var y = e.pageY-8;context.moveTo(x,y);socket.emit("send1",[x,y])})$("canvas").mousemove(function(e){var x = e.pageX-8;var y = e.pageY-8;//$("#info").html("( "+x+" , "+y+" )");socket.emit("send2",[x,y])if(temp){context.lineTo(x,y);context.stroke();}})$("canvas").mouseup(function(e){temp=false;socket.emit("send3",1)})}
</script>
</html>
学生端：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>看图</title>
</head>
<script src="jquery.js"></script>
<body><div class="paint"><canvas id="canvas" width="500" height="400" style="border:1px solid #c3c3c3;"></canvas></div>
</body>
<script src="./socket.io.js"></script>
<script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
<script>var socket = io("http://localhost:3000");socket.on('connect',function(){console.log('连接成功')})socket.on('msg',function(data){var img=new Image()img.src=data;var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//console.log(result)img.onload = function(){context.drawImage(img,0,0,500,400);}})socket.on('disconnect',function(){console.log('断开连接')})window.onload=function(){var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var temp = false;socket.on('msg1',function(data){temp=true;var x=data[0];var y=data[1];context.moveTo(x,y);})socket.on('msg2',function(data){var x=data[0];var y=data[1];if(temp){context.lineTo(x,y);context.stroke();}})socket.on("msg3",function(data){if(data==1){temp=false;}})}</script>
</html>
以及路由：
var app = express();var server = require("http").createServer(app);
var io = require('socket.io')(server);
io.on('connection',function(socket){socket.on("send",function(data){io.emit("msg",data)})socket.on("send1",function(data){io.emit("msg1",data)})socket.on("send2",function(data){io.emit("msg2",data)})socket.on("send3",function(data){io.emit("msg3",data)})socket.on('reply',function(){})
})这里做一些简单的说明，首先是教师端使用socket.emit(“内容名”,内容)向服务器上传信息，服务器使用socket.on(“内容名”,function(data){ io.emit(内容名2，内容) })将信息传递给所有客户端，客户端再通过socket.on(“内容名2”,function(data){ 处理内容 })，这样就实现了共享。
这篇关于web大作业（9）共享涂鸦的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
