選択できるのは25トピックまでです。
トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
167 行
4.4 KiB
167 行
4.4 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
#c{
|
|
border: 1px solid red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<input type="checkbox" id="er" >橡皮
|
|
<br>
|
|
颜色：黑<input type="radio" name="color" value="black" checked>红<input type="radio" name="color" value="red">蓝<input type="radio" name="color" value="blue">
|
|
<br>
|
|
<canvas id="c" width="400" height="400"></canvas>
|
|
<br>
|
|
<button id="clear">清空画布</button>
|
|
|
|
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var socket = io.connect();
|
|
//从服务器获得消息
|
|
socket.on("message", function(msg){
|
|
dealMsg(msg);
|
|
});
|
|
socket.on("load", function(data){
|
|
for(var i = 0; i < data.msgs.length; i++){
|
|
var m = data.msgs[i];
|
|
dealMsg(m);
|
|
}
|
|
});
|
|
|
|
function dealMsg(msg){
|
|
if(msg.name == "line"){
|
|
line(msg.x1, msg.y1, msg.x2, msg.y2, msg.color);
|
|
}else if(msg.name == "text"){
|
|
text(msg.x, msg.y, msg.text, msg.color);
|
|
}else if(msg.name == "eraser"){
|
|
eraser(msg.x1, msg.y1, msg.x2, msg.y2);
|
|
}else if(msg.name == "clear"){
|
|
clear();
|
|
}
|
|
}
|
|
|
|
var er = $("#er");
|
|
var c = $("#c");
|
|
var cxt = c[0].getContext("2d");
|
|
|
|
var drawing = false;
|
|
var drawStartX = 0;
|
|
var drawStartY = 0;
|
|
var drawEndX = 0;
|
|
var drawEndY = 0;
|
|
|
|
var ering = false;
|
|
var erStartX = 0;
|
|
var erStartY = 0;
|
|
var erEndX = 0;
|
|
var erEndY = 0;
|
|
|
|
c.mousedown(function(e){
|
|
if(!er.is(":checked")){
|
|
drawStartX = e.pageX - this.offsetLeft;
|
|
drawStartY = e.pageY - this.offsetTop;
|
|
drawing = true;
|
|
}else{
|
|
erStartX = e.pageX - this.offsetLeft;
|
|
erStartY = e.pageY - this.offsetTop;
|
|
ering = true;
|
|
}
|
|
});
|
|
|
|
c.mouseup(function(e){
|
|
if(!er.is(":checked")){
|
|
drawEndX = e.pageX - this.offsetLeft;
|
|
drawEndY = e.pageY - this.offsetTop;
|
|
drawing = false;
|
|
socket.emit("line", {
|
|
x1 : drawStartX,
|
|
y1 : drawStartY,
|
|
x2 : drawEndX,
|
|
y2 : drawEndY,
|
|
color : color()
|
|
});
|
|
}else{
|
|
erEndX = e.pageX - this.offsetLeft;
|
|
erEndY = e.pageY - this.offsetTop;
|
|
ering = false;
|
|
socket.emit("eraser", {
|
|
x1 : erStartX,
|
|
y1 : erStartY,
|
|
x2 : erEndX,
|
|
y2 : erEndY
|
|
});
|
|
}
|
|
});
|
|
|
|
c.dblclick(function(e){
|
|
var tx = e.pageX - this.offsetLeft;
|
|
var ty = e.pageY - this.offsetTop;
|
|
var txt = prompt("输入文字");
|
|
socket.emit("text", {
|
|
x : tx,
|
|
y : ty,
|
|
text : txt,
|
|
color : color()
|
|
});
|
|
});
|
|
|
|
$("#clear").click(function(){
|
|
if(confirm("确定要清空画布？")){
|
|
socket.emit("clear", {
|
|
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
//绘制....
|
|
//绘制直线
|
|
function line(x1, y1, x2, y2, c){
|
|
cxt.strokeStyle = c;
|
|
cxt.beginPath();
|
|
cxt.moveTo(x1, y1);
|
|
cxt.lineTo(x2, y2);
|
|
cxt.closePath();
|
|
cxt.stroke();
|
|
}
|
|
|
|
//绘制文字
|
|
function text(x, y, t, c){
|
|
cxt.fillStyle = c;
|
|
cxt.fillText(t, x, y);
|
|
}
|
|
|
|
//橡皮擦（实际是绘制白色的矩形）
|
|
function eraser(x1, y1, x2, y2){
|
|
cxt.fillStyle = "#FFFFFF";
|
|
cxt.fillRect(x1, y1, x2 - x1, y2 - y1);
|
|
}
|
|
|
|
//清空画布
|
|
function clear(){
|
|
cxt.clearRect(0, 0, 400, 400);
|
|
}
|
|
|
|
|
|
|
|
|
|
function color(){
|
|
return $("[name=color]:checked").val();
|
|
}
|
|
|
|
|
|
|
|
//网页加载后读取已画图进度
|
|
$(function(){
|
|
socket.emit("load",{
|
|
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|