init commit
joak
10 months ago
commit
93d03e0441
@ -0,0 +1,2 @@
|
|||||||
|
node_modules/*
|
||||||
|
package-lock.json
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const app = express();
|
||||||
|
const http = require('http');
|
||||||
|
const server = http.createServer(app);
|
||||||
|
const { Server } = require("socket.io");
|
||||||
|
const io = new Server(server);
|
||||||
|
|
||||||
|
app.use(express.static('public'));
|
||||||
|
|
||||||
|
io.on('connection', (socket) => {
|
||||||
|
console.log('a user connected');
|
||||||
|
|
||||||
|
socket.on('draw', (line) => {
|
||||||
|
console.log(line);
|
||||||
|
socket.broadcast.emit("draw",line);
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('disconnect', () => {
|
||||||
|
console.log('user disconnected');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
server.listen(3000, () => {
|
||||||
|
console.log('listening on *:3000');
|
||||||
|
});
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"name": "collective drawing on canvas",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"description": "lets draw together",
|
||||||
|
"dependencies": {
|
||||||
|
"express": "^4.18.2",
|
||||||
|
"socket.io": "^4.7.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||||
|
<head>
|
||||||
|
<title>untitled</title>
|
||||||
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drawing{
|
||||||
|
display: block;
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
border: 1px solid #000;
|
||||||
|
box-shadow: 0px 0px 10px #000;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<canvas id="drawing" width="400" height="400" ></canvas>
|
||||||
|
Width:<input type="range" min="1" max="20" value="5" id="lineWidth">
|
||||||
|
Color:<input type="color" id="color" value="#000000" />
|
||||||
|
</body>
|
||||||
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
|
<script>
|
||||||
|
var socket = io();
|
||||||
|
|
||||||
|
var canvas = document.getElementById("drawing");
|
||||||
|
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
var pos = { x: 0, y: 0 };
|
||||||
|
var lineWidth = 5;
|
||||||
|
var color = "#000000";
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', draw);
|
||||||
|
document.addEventListener('mousedown', setPosition);
|
||||||
|
document.addEventListener('mouseenter', setPosition);
|
||||||
|
|
||||||
|
function setPosition(e) {
|
||||||
|
pos.x = e.clientX - canvas.offsetLeft;
|
||||||
|
pos.y = e.clientY - canvas.offsetTop;
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(e) {
|
||||||
|
if (e.buttons !== 1) return;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.lineWidth = lineWidth;
|
||||||
|
ctx.lineCap = 'round';
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.moveTo(pos.x, pos.y);
|
||||||
|
var oldpos = { x: pos.x, y: pos.y };
|
||||||
|
setPosition(e);
|
||||||
|
ctx.lineTo(pos.x, pos.y);
|
||||||
|
ctx.stroke();
|
||||||
|
socket.emit('draw', {oldpos, pos, lineWidth, color});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("lineWidth").addEventListener('change', function(){
|
||||||
|
lineWidth = this.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("color").addEventListener('change', function(){
|
||||||
|
color = this.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
socket.on("draw", function(input){
|
||||||
|
ctx.lineWidth = input.lineWidth;
|
||||||
|
ctx.strokeStyle = input.color;
|
||||||
|
ctx.moveTo(input.oldpos.x, input.oldpos.y);
|
||||||
|
ctx.lineTo(input.pos.x, input.pos.y);
|
||||||
|
ctx.stroke();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue