|
|
|
|
<head>
|
|
|
|
|
<title>drawing</title>
|
|
|
|
|
<style>
|
|
|
|
|
.center{
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#drawing{
|
|
|
|
|
border: 1px solid #000;
|
|
|
|
|
box-shadow: 0px 0px 10px #000;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1 class="center">drawing editor</h1>
|
|
|
|
|
<canvas id="drawing" width="400" height="400"></canvas><br>
|
|
|
|
|
Stroke width: <input type="range" min="0.5" max="50" value="1" id="width"><br>
|
|
|
|
|
Color: <input type="color" id="color">
|
|
|
|
|
Brush: <select id="linecap">
|
|
|
|
|
<option value="square">square</option>
|
|
|
|
|
<option value="round">round</option>
|
|
|
|
|
<option value="butt">butt</option>
|
|
|
|
|
</select>
|
|
|
|
|
</body>
|
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
var socket = io();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var lineWidth = 1;
|
|
|
|
|
var color = "#000000";
|
|
|
|
|
var brush = "square";
|
|
|
|
|
document.getElementById("linecap").addEventListener('change', function(){
|
|
|
|
|
brush = this.value;
|
|
|
|
|
});
|
|
|
|
|
document.getElementById("color").addEventListener('change', function(){
|
|
|
|
|
color = this.value;
|
|
|
|
|
});
|
|
|
|
|
document.getElementById("width").addEventListener('change', function(){
|
|
|
|
|
lineWidth = this.value;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var canvas = document.getElementById("drawing");
|
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
|
var pos = {x: 0, y: 0};
|
|
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', draw);
|
|
|
|
|
document.addEventListener('mousedown', 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.lineWidth = lineWidth;
|
|
|
|
|
ctx.lineCap = brush;
|
|
|
|
|
ctx.strokeStyle = color;
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(pos.x,pos.y);
|
|
|
|
|
var startPos = {x: pos.x, y: pos.y};
|
|
|
|
|
setPosition(e);
|
|
|
|
|
ctx.lineTo(pos.x,pos.y);
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
socket.emit("picture", {
|
|
|
|
|
startPos,
|
|
|
|
|
pos,
|
|
|
|
|
color,
|
|
|
|
|
lineWidth
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
socket.on("dingdong", (line) => {
|
|
|
|
|
console.log(line);
|
|
|
|
|
ctx.lineWidth = line.lineWidth;
|
|
|
|
|
ctx.strokeStyle = line.color;
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(line.startPos.x, line.startPos.y);
|
|
|
|
|
ctx.lineTo(line.pos.x, line.pos.y);
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
