express 制作 html5,javascript,html5_我想做一个利用canvas，node.js,socket.io和express实现的同步电子白板：，javascript,html5...
我想做一个利用canvas，node.js,socket.io和express实现的同步电子白板：
$(function () {
App.whiteboard = $('#whiteboard');
App.ctx = App.whiteboard[0].getContext("2d");
// Connect mouse events
App.whiteboard.on('mousedown mouseup mousemove', null, function (e) {
if (!App._startedDrawing && e.type != "mousedown") return;
App._startedDrawing = true;
var offset = $(this).offset();
var data = {
x: (e.pageX - offset.left),
y: (e.pageY - offset.top),
type: e.handleObj.type,
color: App.ctx.strokeStyle,
imageData: App.whiteboard[0].toDataURL()
};
App.draw(data); // Draw yourself.
App.socket.emit('do-the-draw', data); // Broadcast draw.
});
// Clear button
$('#clear').on('click', function () {
App.clear(); // Clear our screen
App.socket.emit('clear'); // Broadcast clear.
});
});
例如这一段，我想实现点击铅笔图像，来画图，可我像给清除按钮一样加个click事件，也不能实现。真的是不知道怎么改了。
但是目前只实现了画笔和清除和同步功能了，我想实现一下功能，但不知道如何下手
var mousedown = function(e){
// 在开始画时设置选择好的颜色
context.strokeStyle= color;
// context_bak.strokeStyle= color;
// 在开始画时设置选择好的宽度
// context_bak.lineWidth = size;
e=e||window.event;
startX = e.clientX - canvasLeft;
startY = e.clientY - canvasTop;
// context_bak.moveTo(startX ,startY );
canDraw = true;
if(graphType == 'pencil'){
context_bak.beginPath();
}else if(graphType == 'circle'){
context_bak.beginPath();
// context.moveTo(startX ,startY );
// context.lineTo(startX +2 ,startY+2);
context_bak.closePath();
context_bak.stroke();
}else if(graphType == 'rubber'){
context_bak.clearRect(startX - size * 10 , startY - size * 10 , size * 20 , size * 20);
}
};
//鼠标离开 把蒙版canvas的图片生成到canvas中
var mouseup = function(e){
e=e||window.event;
canDraw = false;
var image = new Image();
if(graphType!='rubber'){
image.src = canvas_bak.toDataURL();
image.onload = function(){
context.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , canvasWidth , canvasHeight);
clearContext();
// 将图像信息保存到数组中
saveImageToAry();
}
var x = e.clientX - canvasLeft;
var y = e.clientY - canvasTop;
context.beginPath();
context.moveTo(x ,y);
// context.lineTo(x +2 ,y+2);
context.closePath();
context.stroke();
}
};
//选择功能按钮 修改样式
function chooseImg(obj){
var imgAry = $("#drawController img");
for(var i=0;i
$(imgAry[i]).removeClass('border_choose');
$(imgAry[i]).addClass('border_nochoose');
}
$(obj).removeClass("border_nochoose");
$(obj).addClass("border_choose");
}
// 鼠标移动
var mousemove = function(e){
e=e||window.event;
var x = e.clientX - canvasLeft;
var y = e.clientY - canvasTop;
//方块 4条直线搞定
if(graphType == 'square'){
console.log(graphType);
if(canDraw){
context_bak.beginPath();
clearContext();
context_bak.moveTo(startX , startY);
context_bak.lineTo(x ,startY );
context_bak.lineTo(x ,y );
context_bak.lineTo(startX ,y );
context_bak.lineTo(startX ,startY );
context_bak.closePath();
context_bak.stroke();
}
//直线
}else if(graphType =='line'){
if(canDraw){
context_bak.beginPath();
clearContext();
context_bak.moveTo(startX , startY);
context_bak.lineTo(x ,y );
context_bak.closePath();
context_bak.stroke();
}
//画笔
}else if(graphType == 'pencil'){
if(canDraw){
context_bak.lineTo(e.clientX - canvasLeft ,e.clientY - canvasTop);
context_bak.stroke();
}
//圆未画得时候 出现一个小圆
}else if(graphType == 'circle'){
clearContext();
if(canDraw){
context_bak.beginPath();
var radii = Math.sqrt((startX - x) * (startX - x) + (startY - y) * (startY - y));
context_bak.arc(startX,startY,radii,0,Math.PI * 2,false);
context_bak.stroke();
}
else{
context_bak.beginPath();
context_bak.arc(x,y,10,0,Math.PI * 2,false);
context_bak.stroke();
}
//涂鸦 未画得时候 出现一个小圆
}else if(graphType == 'handwriting'){
if(canDraw){
context_bak.beginPath();
context_bak.strokeStyle = color;
context_bak.fillStyle = color;
context_bak.arc(x,y,size*10,0,Math.PI * 2,false);
context_bak.fill();
context_bak.stroke();
context_bak.restore();
}else{
clearContext();
context_bak.beginPath();
context_bak.fillStyle = color;
context_bak.arc(x,y,size*10,0,Math.PI * 2,false);
context_bak.fill();
context_bak.stroke();
}
//橡皮擦 不管有没有在画都出现小方块 按下鼠标 开始清空区域
}else if(graphType == 'rubber'){
context_bak.lineWidth = 1;
clearContext();
context_bak.beginPath();
context_bak.strokeStyle = '#000000';
context_bak.moveTo(x - size * 10 , y - size * 10 );
context_bak.lineTo(x + size * 10 , y - size * 10 );
context_bak.lineTo(x + size * 10 , y + size * 10 );
context_bak.lineTo(x - size * 10 , y + size * 10 );
context_bak.lineTo(x - size * 10 , y - size * 10 );
context_bak.stroke();
if(canDraw){
context.clearRect(x - size * 10 , y - size * 10 , size * 20 , size * 20);
}
}
};
例如上边的代码是本来单独的白板可以用来选择画笔类型的代码实现，现在我想把它合并到可以通不足传输的那个系统中去，但是不知道怎么改
相关阅读:
url中不显示html后缀
如果update执行失败了，该怎么处理比较合适？
Spring Boot怎么处理上传文件时出现的MultipartException
Android Studio每次编译完都要Instantiating Test..
两个子元素分别左右浮动，父元素高度为什是0？
Vim中与系统剪贴板交互时,除使用「"+」这个寄存器外,还有什么比较好的(优雅点)解决思路?
rvm安装问题
支持 coroutine 会对 Node 带来什么影响?
WEB系统中用户登录的一些疑问
angular在service下写的赋值在controller的$scope上监听不到？
android如何获取同一wifi下电脑共享的文件?
Haskell 如何生成带缩进的 JSON?
java中==不是只能判断数值类型吗？为什么可以判断空字符串，输出为true？
比较大的项目 要不要把url都统一到一个表里面？大家都是怎么做的？
wordpress服务器上mysql数据库出现问题
在 System.Net.Http.Headers.HttpHeaders.Contains(String name)处抛出异常
求助，这个效果怎么在移动端浏览器实现？
Swoole 用tcp自带的keep alive 不起作用
phpstorm eclipse 代码风格
问个小白问题-怎么切图？