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

Question

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

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

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