javascript - 我们如何同步不同页面上的两个 Canvas 元素

Question

我需要在另一个页面上复制 Canvas ，这两个页面都与socket.io连接，所以我有通信 channel 。

据我的研究表明，我可以使用 getImageData 来获取像素数据并将其发送到另一个页面，以便该页面将绘制此 Canvas ，并且我将继续按间隔发送此数据任何更改也将同步..(现在我正在编写用于管理 20x20 像素 block 的代码，以及任何更改的 block 都会复制到另一个页面。)

同步意味着我还需要进行更改才能同步。

还有更好的解决办法吗？仅同步最后一刻更改的内容或不使用 getImageData。

[这个 Canvas 不是我的，它不在我的控制范围内，因为我正在实现协同浏览解决方案，所以在代理端我将渲染将在我的控制范围内的 Canvas 。]

Answer 1

每次发送时传输完整的 Canvas 内容是资源密集型且效率低下的。

想象一下发送一个完整的 300x300px 图像来传达绘制到 Canvas 上的单个 1x1px 矩形!

相反，序列化每组绘图命令(==每个beginPath到其结尾fill/描边 )。您可以使用标记来表示每个绘图命令。

例如...

ctx.beginPath();
ctx.moveTo(100,50);
ctx.lineTo(150,100);
ctx.lineTo(50,100);
ctx.closePath();
ctx.fillStyle='red';
ctx.fill();

...可以标记为:

var set1=[
    ['m',100,50],
    ['l',150,100],
    ['l',50,100],
    ['z'],
    ['fs','red'],
    ['f'],
    ['sequence',myOrder++],
    ['timestamp',performance.now()]
];

当然，您可以自定义标记特定于您的设计的任何复杂命令集。例如，您可能有一个可以移动整个 20x20 像素 block 的标记。

您可以JSON.toString此标记化命令集并将其广播到其他客户端(==其他页面)。

当客户端收到消息时，他们可以使用 JSON.parse 重新水化命令集并在自己的 Canvas 上处理它。

一些帮助您入门的注意事项:

• 发出可能会丢失，因此可以使用sequence和timestamp字段来请求丢失的数据包并对数据包进行正确排序。您可以进行点对点数据包管理，但让服务器处理数据包管理会更容易。

• 某些 Canvas 操作不容易序列化。特别是，使用 getImageData 进行的像素操作不容易序列化(包括使用 getImageData 的第 3 方图像过滤器)。

• 在实践中，您有时需要将所有 Canvas “硬重置”为“最后一次已知的正确”内容状态。您可以通过清除所有 Canvas 并重新发出自时间开始以来的所有命令集来做到这一点。为了提高效率，让服务器偶尔缓存最后一次已知良好 Canvas 的图像(以及在已知良好之后发出的任何命令集)。这样您就可以在需要时进行硬重置。