将画布对象保存为 json

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

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

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

我的意思是如何创建两个像上面一样的项目，但只修改 x,y 起始位置？我能想到的就是eval但我知道这会严重减慢画布上的绘图速度。

The context.getImageData()是您正在寻找的功能。它将返回一个ImageData来自画布上数据的对象（MDN https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData）。它的语法如下：

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

因此，如果您想保存并序列化画布中的数据，您可以使用以下代码：

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

Now the .data财产在ImageData对象是一个Uint8ClampedArray，这基本上是画布上所有颜色的一个大列表。但是，您选择序列化并不重要。

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

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

祝你好运！