javascript - HTMLキャンバスを保存してから、形状を失わずに再ロードするにはどうすればよいですか?

Question

ユーザーが図形を追加できる html5 キャンバスがあります。形状にはあらゆる種類の動作があります - サイズ変更可能、移動可能など以前に保存した形と同じキャンバス (既存の形を移動/サイズ変更し、新しい形を追加できるはずです)

toDataURL は、すべての形状を含むキャンバスを画像に変換するため、私には適していません。そのため、既存の形状がすべて失われます。キャンバスまたはコンテキストをオブジェクトとしてデータベースに保存し、後で再ロードする方法はありますか?

Answer 1

おそらく、各形状の属性を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"
    }]
}