Question

如何序列化画布对象，如下图所示？

            context.beginPath();
            context.rect(188, 50, 200, 100);
            context.fillStyle = 'yellow';
            context.fill();
            context.lineWidth = 7;
            context.strokeStyle = 'black';
            context.stroke();

因为它在程序上与画布上下文交互（是正确的术语吗？）我认为这不可能。但我想保存这样的对象，以便更容易操作它们。

我的意思是我怎么能创建两个像上面那样的项目，只是修改x，y起始位置？我所能想到的只是eval，但我知道这会大大减慢画布的速度。

Answer 1

context.getImageData()是您正在寻找的功能。它将从画布上的数据（MDN）返回ImageData个对象。它的语法如下：

ImageData ctx.getImageData(sx, sy, sw, sh);

因此，如果要从画布保存和序列化数据，可以使用以下代码：

var data = context.getImageData(0, 0, context.canvas.width, context.canvas.height).data;

现在.data对象上的ImageData属性是Uint8ClampedArray，它基本上是画布所有颜色的大列表。但是，您选择序列化并不重要。

<小时/> 假设您收到了一个序列化的画布“消息”，并希望将其重新放回画布上。没问题，您只需要context.putImageData()：

context.putImageData(message.data, 0, 0);

这会将第一个画布上的数据“粘贴”到第二个画布上。

祝你好运！

Answer 2

如果你只想重新定位你的绘图而不必担心每个原始坐标，只需使用context.translate将画布[0,0]原点移动到画布上的任何所需位置。

function draw(offsetX,offsetY){
    // translate the [0,0] origin of the canvas to [offsetX,offsetY]
    context.translate(offsetX,offsetY);

    // draw the original rectangle (no changes are required to any coordinates
    context.beginPath();
    context.rect(188, 50, 200, 100);
    context.fillStyle = 'yellow';
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = 'black';
    context.stroke();

    // always clean up! Reverse the translation
    context.translate(-offsetX,-offsetY);
}

如果要将原始画布命令发送到其他设备，则必须序列化上下文绘制命令。请参阅前面的Q&A，其中显示了如何将画布绘制命令保存为字符串。该字符串可以发送到其他地方（f.ex使用AJAX或websockets）然后接收设备可以“重放”命令。

将画布对象保存为json

2 个答案: