$(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.length;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);
}
}
};例如上边的代码是本来单独的白板可以用来选择画笔类型的代码实现，现在我想把它合并到可以通不足传输的那个系统中去，但是不知道怎么改
没太明白你的问题是什么？ Canvas不会用？websocket不熟？