You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.9 KiB
HTML
82 lines
1.9 KiB
HTML
<!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>
|