デモの説明
今回作成したデモンストレーションは、複数ユーザで同時編集可能な「オンライン黒板」です。
この黒板の最大の特徴は、複数人で同時編集可能なことです。もちろんその機能の実装にはWebSocket(Socket.IO)を使用しています。
チョークで書く、黒板消しで消す、と言った操作だけではなく、他のユーザのマウスポインタの位置もリアルタイムに把握することができます。
Canvasを使用したUIの作成
まず黒板の部分はHTML5 Canvasを利用して実現しています。チョークで書く、黒板消しで消す、マウスポインタの位置を共有するといった機能については、マウス移動のイベントを捕捉して、それぞれの処理に分岐しています。
その部分のコードを抜粋します。細かいところを省略してしまえば、処理の流れは非常に単純です。
// マウス移動のイベントを捕捉
canvas.mousemove(function(e) {
// Canvas上での現在のマウス座標を取得
var curPos = posOnCanvas(e.pageX, e.pageY);
var currentX = curPos.x;
var currentY = curPos.y;
// マウス移動をサーバに送信する
COMMAND_OPS.mouseMove({...}, true);
if (!drawing) {
return;
}
// 黒板消しで消す
if (eracing) {
COMMAND_OPS.erase({...}, true);
}
// チョークで書く
else {
COMMAND_OPS.drawLine({...}, true)
}
prevX = currentX;
prevY = currentY;
});
CanvasのAPIを使用しているコードの例として、黒板に線を書く部分を見てみましょう。線書き出しの開始位置（start）は前回のマウス座標、終了位置（end）は今回のマウス座標となります。
var start = param.start, end = param.end; // 線のスタイル(色に応じた画像を使用) ctx.strokeStyle = LINE_PATTERNS[param.color]; ctx.lineWidth = lineWidth; // 線の太さ ctx.lineJoin = "round"; // 線の結合部分を丸める ctx.lineCap = "round"; // 線の端を丸める ctx.beginPath(); // パスの書き出し開始 ctx.moveTo(start.x, start.y); // 開始位置に移動 ctx.lineTo(end.x, end.y); // 終了位置に向けて直線を引く ctx.stroke(); // パスの書き出し ctx.closePath(); // パスを閉じる
ここでは、CanvasのAPIを素直に使用しているだけですので、説明は省きます。
