Question

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

它的工作原理如下：你可以看到有人画了一些东西，然后画出一些会出现在画布中的东西。当你和其他人同时画画时会出现问题。

对于每个用户，它使用以下方法为每个用户的画布创建一个新的上下文：

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

当您在与其他用户同时绘制时，画布会在您和它们的坐标之间疯狂地绘制线条，尽管它使用不同的上下文。

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

非常感谢任何帮助。

Answer 1

The HTML5 Canvas spec says，getContext()：

如果已经在此元素上调用了getContext（）方法对于相同的contextId，返回与返回的对象相同的对象时间，并中止这些步骤。其他参数将被忽略。

每个用户没有不同的上下文，它是相同的。每个新事件都会改变最后一个路径位置，我猜你没有使用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;

Answer 2

我怀疑用户正在使用相同的上下文。我建议收集传入的绘图请求，并将其合并到一个绘制方法中，在适当的时候构建画布内容。

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

2 个答案: