Javascript 如何保存html画布，然后在不丢失形状的情况下重新加载它？

我有一个html5画布，用户可以向其中添加形状。形状有各种各样的行为——它们可以调整大小，可以四处移动，等等。 我需要保存它，以便以后可以重新加载（用户添加的形状，保存，关闭浏览器。当他重新打开浏览器时，他应该得到与他以前保存的形状相同的画布。他应该能够移动/调整现有形状的大小，并添加新形状）

toDataURL对我来说不好，因为它将包含所有形状的画布转换为图像，因此所有现有形状都将丢失。

---

是否有某种方法将画布或上下文作为对象保存到db并稍后重新加载？

也许您可以将每个形状的属性存储在

JSON

对象中，并将其存储在

localStorage

或保存到db中。大概是这样的：

var ShapeData = {shapes:[]}
for(var i = 0; i < shapes.length; i++) {

    var newShape = {
        type : shapes[i].getType(),
        x : shapes[i].getX(),
        y : shapes[i].getY(),
        w : shapes[i].getWidth(),
        h : shapes[i].getHeight(),
        rot : shapes[i].getRotation()
    }

    ShapeData.shapes[i] = newShape;
}


var toTheDatabase = JSON.stringify(ShapeData);

var ShapeData = {
    "shapes" : [{
        "type":"square",
        "x":"10",
        "y":"40",
        "w":"2",
        "h":"90",
        "rot":"140"
    },{
       "type":"circle",
        "x":"60",
        "y":"100",
        "w":"2",
        "h":"90",
        "rot":"0"
    }]
}

---

您可以使用canvas库来实现画布序列化，如