http://jsdo.it/uhauha909/5zoU のプログラムをlocalStorageにデータを保存するように修正してください。回答はソースコードにてお願いします。一番早い回答者様に最大ポイントを差し上げます。
No.1
21
9
http://jsdo.it/syamaoka/6nlW
要件を満たせているか分かりませんが、localStorage に canvas を base64 にして保存するようにしてみました。保存する際に複数の canvas を1つの画像データにまとめてしまっているので、restore した後に erase できません。ちゃんと復元できるようにするとなると、canvas を生成する処理自体を履歴として localStorage に保存しておき、復元時にその操作を再生する方式が考えられるでしょう。今回は手間がかかるため実装してません。
はてなポイントは使い道がないので不要です。
* canvas に対して線を描画する時(つまりマウスのイベントハンドリング)に、線の描画に必要な情報をすべて data 属性に順序付きで溜め込んでいく
* canvas を保存する際に各 canvas 毎の描画情報を JSON.stringify で JSON 化する
* 復元するために、描画情報を持った JSON を localStorage に保存しておく
* canvas を復元する時は localStorage から描画情報を持った JSON を取得し、JSON.parse で描画情報として取り出す
* 描画情報を元に canvas の描画処理を順番に呼び出す
サンプルアプリ程度ならこんな適当な方法でも実装できそうな気がします。試してません。
やる前から実装するのが面倒であることが分かるため、きっと回答は付かないと思いますので、ご自分で頑張ってみてください。
1
1
ここでベストアンサー
1
2
ありがとうございます。参考になりました。
2015/01/03 21:01:54