如何保存html canvas，然後重新加載而不會丟失形狀？

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