HTML Canvas:同时进行多个getContext绘图

Question

我正在使用websockets构建一个工具,允许多个用户"绘制"彼此的画布.用户在画布上绘图,并且包含mousedown/mouseup事件和坐标的对象会立即推送给其他用户.然后将其绘制在它们的画布上,这样可以使多个用户在同一个地方绘制.

它的工作原理如下:你可以看到有人画一些东西,然后绘制一些会出现在画布中的东西.当您与其他人同时绘制时会出现问题.

对于每个用户,它使用以下内容为每个用户的画布创建新的上下文:

oekaki['canvas'] = document.getElementById('canvas');
oekaki['ctx'][unique_user_id] = oekaki['canvas'].getContext("2d");

当你在与另一个用户同一时刻绘制时,画布疯狂地在你和它们的坐标之间绘制线条,尽管它使用不同的上下文.

为什么会这样？我是否必须做其他事情才能同时绘制多条线？是不是可以用这种方式创建多个上下文？

非常感激任何的帮助.

Answer 1

HTML5的Canvas规范说,为getContext():

如果已在此元素上为同一contextId调用了getContext()方法,则返回与该时间返回的对象相同的对象,并中止这些步骤.其他参数将被忽略.

每个用户没有不同的上下文,它们是相同的.每个新事件都会改变最后一个路径位置,我猜你没有使用beginPath并moveTo重置每个新事件的路径.尝试这样的事情:

// on some event, want to draw to (x, y) now:
var ctx = oekaki.canvas.getContext('2d');
var user = oekaki.user[unique_user_id];
ctx.beginPath();
ctx.moveTo(user.lastX, user.lastY);
ctx.lineTo(x, y);
// ctx.strokeStyle = ..., ctx.stroke(), etc, etc...
user.lastX = x;
user.lastY = y;