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

如何保存html画布然后重新加载而不会丢失形状？

1 个答案: