利用canvas搭建白板
首先在html中设置一个白板区域，添加一个清除白板的按钮
<canvas id="whiteboard" width="1280px" height="720px" class="whiteboard-canvas"></canvas>
<div>
<button id="clear" class="btn-warning">清除画板</button>
</div>
接着在js中创建一个App对象，用于管理所有白板相关的属性和方法，并且添加处理鼠标事件的方法。
App.whiteboard = $('#whiteboard');
App.ctx = App.whiteboard[0].getContext("2d");
// 标记是否开始绘图
App._startedDrawing = false;
// 鼠标事件关联绘图：下笔、移动、提笔
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);
})
// 鼠标事件关联清除画板
$('#clear').on('click', function() {
App.clear();
})
然后写draw函数，将传入的data在画布上展现出来；以及clear函数，用于清空画板
// 绘图操作
App.draw = function (data) {
var originalColor = App.ctx.strokeStyle;
App.ctx.strokeStyle = data.color;
if (data.type == "mousedown") {
App.ctx.beginPath();
App.ctx.moveTo(data.x, data.y)
} else if (data.type == "mouseup") {
App.ctx.stroke();
App.ctx.closePath();
App._startedDrawing = false;
App.socket.emit('save-data', App.whiteboard[0].toDataURL());
} else {
App.ctx.lineTo(data.x, data.y);
App.ctx.stroke();
}
App.ctx.strokeStyle = originalColor;
};
App.clear = function () {
App.ctx.clearRect(0, 0, App.whiteboard[0].width, App.whiteboard[0].height);
};
这个时候，就完成了鼠标路径到画布显示的路径
利用websocket同步画板
这里在服务端和客户端均是利用socket.io来实现websocket。首先在客户端js中写好连接websocket，发送笔画、接受笔画的方法。
// 建立websocket
App.socket = io('http://' + window.location.host);
// 初始化图片和色彩
App.socket.on('setup', function (color, dataUrl) {
App.ctx.strokeStyle = color;
if (dataUrl) {
// 从url加载图片
var imageObj = new Image();
imageObj.onload = function () {
App.ctx.drawImage(this, 0, 0);
};
imageObj.src = dataUrl;
}
});
// 接受笔画信息
App.socket.on('draw', App.draw);
// 接受清除画板请求
App.socket.on('clear', App.clear);
// 发送笔画至服务端
App.socket.emit('do-the-draw', data);
// 发送画完一笔的信息至服务端
App.socket.emit('save-data', App.whiteboard[0].toDataURL());
// 发送清除画板请求
App.socket.emit('clear');
在客户端，由于socket.io是基于server进行websocket操作的，而server的架设在bin\www文件中，因此为了能够在路由中实现websocket，需要完成一个router.js→app.js→www的过程。
// eoutes\canvas.io
var imageData;
// 对不同用户给不同的颜色
var colors = [ "#CFF09E", "#A8DBA8", "#79BD9A", "#3B8686", "#0B486B" ];
var i = 0;
var IO = null;
// 这里定义了一个io函数
router.io = function(io) {
io.on('connection', (socket) => {
if (i == 5) i = 0;
socket.emit('setup', colors[i++], imageData);
socket.on('do-the-draw', (data) => {
// 用户画了一笔
socket.broadcast.emit('draw', data);
imageData = data.imageData;
})
socket.on('clear', function() {
// 用户清除画板
socket.broadcast.emit('clear');
imageData = null;
})
socket.on('save-data', (data) => {
// 用户画完一笔
imageData = data;
})
});
IO = io;
return io;
}
这里在路由中定义了一个对传入io进行socket操作的函数，并且将这个函数传出出去。
// app.js
// 引入路由
var canvasRouter = require('./routes/canvas')
// 引入路由中的io函数
app.canvasIO = canvasRouter.io;
// 便于在路由中响应http请求
app.use('/canvas', canvasRouter);
而app.js获得router传出的这个函数，并再次传出去
// bin\www
// 架设server
var server = http.createServer(app);
// 引入socket.io
var io = require('socket.io')(server);
// 将io传入app.js的canvasIO函数中，最终传入canvas.js的io函数中
app.canvasIO(io);
www获得app.js传出的对io进行操作的函数，并且传入server的io。这个时候，不同客户端之间就可以实时共享白板了。
添加上传画布背景功能
为了便于对某一张图片进行标记和讲解，需要添加一个上传画布背景的功能。
选用的依然是bootstrap-fileinput插件，在html中插入上传框，在上传初始化中将上传的文件格式限制为’jpg’, ‘gif’, ‘png’, ‘jpeg’。上传后，在路由中接受文件并暂存为临时文件。
//上传背景图片
router.post('/upload', function(req, res) {
var form = new formidable.IncomingForm();
// ...
// formidable对象的临时路径等属性的初始化
form.parse(req, function(err, fields, files) {
var filepath = '';
for (var key in files) {
// ...
// 获取到临时存放的文件地址
}
var fileExt = filepath.substring(filepath.lastIndexOf("."));
// 文件类型校验
if ((".jpg.png.bmp.jpeg").indexOf(fileExt.toLowerCase()) == -1) {
// ...
// 格式不对的操作
} else {
// ...
// 提供格式正确的返回值，并且利用socket向所有客户端发送背景临时文件的地址
}
});
})
然后在客户端js中加入更换图片背景的方法
// 接受图片背景
App.socket.on('drawImage', (data) => {
var imgObj = new Image();
imgObj.src = '/canvas/image?path=' + data.data; // 通过url获得服务端图像临时文件
imgObj.onload = function() {
App.ctx.drawImage(this, 0, 0, 1280, 720); // canvas 绘制图像
}
$("#downblock").hide();
// 或者直接将图像作为背景，但不推荐
//$('#whiteboard').css("background", "url(" + data.data + ") no-repeat");
})
通过上传图片→分发图片→绘制图片的过程，所有的客户端，不论是已经打开的，还是后续打开的，都可以在画布上看见新的图片。
切换黑白板功能
切换黑白板功能只需要在预先存好黑白两个底色，然后在路由中存储一个是否为白色的变量。每次客户端点击切换黑白板的时候，将请求emit到服务端，然后服务端修改这个变量，并且在emit到所有客户端即可
保存画板功能
保存画板需要用到canvas的一个toDataURL方法，然后将获得的url下载下来
// 保存画板
$(document).ready(() => {
$('#save').click(() => {
downLoad(whiteboard.toDataURL("image/png"));
})
})
function downLoad(url){
// 创建一个新的元素，将href值设为url，并点击它
}
通过点击新建的下载元素，可以通过canvas的url，将画布转为png文件下载下来
同样地，这个简单的共享白板也可以添加更多优化，例如撤销恢复功能，添加线条、方框、箭头等基本元素的功能，以及对学生访问白板的权限管理等。
