HTML画布：同时绘制多个getContext

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

它的工作方式如下：你可以看到某人画了一些东西，然后画出一些会出现在他们的画布中的东西。当你像其他人一样画画时会出现问题。

对于每一个用户来说，使用每个用户的画布创建一个新的上下文：

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

当你画在同一时刻以其他用户身份，画布疯狂提请你和它们的坐标之间的直线，尽管它使用不同的上下文。

为什么会出现这种情况？我是否需要做其他事情来容纳同时绘制多条线？以这种方式创建多个上下文是不可能的？

任何帮助将不胜感激。

来源

2011-12-07 eddz

The HTML5 Canvas spec says，为getContext()：

如果的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;

来源

2011-12-07 15:33:31

你，先生，辉煌。这立即奏效，并且让我从几个小时的挫折中解脱出来。非常感谢你！ – eddz

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

来源

2011-12-07 15:05:54 mfeineis

HTML画布：同时绘制多个getContext

回答

相关问题