HTML Canvas:同时绘制多个 getContext [英] HTML Canvas: Multiple getContext plotting at same time

问题描述

我正在使用 websockets 构建一个工具，它允许多个用户在彼此的画布上绘图".用户在画布上绘图，包含 mousedown/mouseup 事件和坐标的对象会立即推送给其他用户.然后将其绘制在他们的画布上，从而产生多个用户在同一位置绘图的效果.

I'm building a tool using websockets which allows multiple users to "draw" on each others' canvases. The user draws on a canvas, and an object containing mousedown/mouseup events and coordinates is pushed to other users instantaneously. This is then plotted on their canvases, which gives the effect of having multiple users drawing in the same place.

它的工作原理与描述的一样:您可以观看某人绘制一些东西，然后绘制一些将出现在他们的画布中的东西.当您与其他人同时绘图时，就会出现问题.

It works as described: you can watch somebody draw something, then draw something which will appear within their canvas. The problem occurs when you draw at the same moment as somebody else.

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

For each user, it creates a new context for each user's canvas using:

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

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

When you draw at the same moment as another user, the canvases madly draw lines between your and their coordinates, despite it using the different contexts.

为什么会这样?我是否必须做其他事情来容纳一次绘制的多条线?这样是不是不能创建多个上下文?

Why is this the case? Do I have to do something else to accommodate multiple lines being plotted at once? Is it not possible to create multiple contexts in this way?

任何帮助将不胜感激.

推荐答案

HTML5 Canvas 规范说，对于 getContext():

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

If the getContext() method has already been invoked on this element for the same contextId, return the same object as was returned that time, and abort these steps. The additional arguments are ignored.

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

You don't have a different context per user, it's the same one. The last path position is being altererd by each new event, and I'm guessing you're not using beginPath and moveTo to reset the path on each new event. Try something like this instead:

// 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;

这篇关于HTML Canvas:同时绘制多个 getContext的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！