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

Question

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

toDataURL 对我不利，因为它将所有形状的画布转换为图像，因此所有现有形状都丢失了。有什么方法可以将画布或上下文作为对象保存到数据库并稍后重新加载？

Answer 1

也许您可以将每个形状的属性存储在一个JSON对象中，并将其存储localStorage或保存到数据库中。像这样的东西：

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"
    }]
}