JavaScript + HTML5 Canvasに関する質問です。

http://jsdo.it/uhauha909/5zoU のプログラムをlocalStorageにデータを保存するように修正してください。回答はソースコードにてお願いします。一番早い回答者様に最大ポイントを差し上げます。

回答の条件
  • 1人3回まで
  • 登録:2014/12/29 03:34:11
  • 終了:2015/01/03 21:03:51

ベストアンサー

id:rikuba No.2

rikuba回答回数26ベストアンサー獲得回数122014/12/29 18:31:30

ポイント1000pt

http://jsdo.it/rikuba/6lJR
描画をオブジェクトとして扱うためにいろいろとコードを改変しています。

id:kimusdagre

ありがとうございます。参考になりました。

2015/01/03 21:01:54

その他の回答(1件)

id:syamaoka No.1

syamaoka回答回数19ベストアンサー獲得回数82014/12/29 09:47:09

http://jsdo.it/syamaoka/6nlW

要件を満たせているか分かりませんが、localStorage に canvas を base64 にして保存するようにしてみました。保存する際に複数の canvas を1つの画像データにまとめてしまっているので、restore した後に erase できません。ちゃんと復元できるようにするとなると、canvas を生成する処理自体を履歴として localStorage に保存しておき、復元時にその操作を再生する方式が考えられるでしょう。今回は手間がかかるため実装してません。
はてなポイントは使い道がないので不要です。

他2件のコメントを見る
id:syamaoka

* canvas に対して線を描画する時(つまりマウスのイベントハンドリング)に、線の描画に必要な情報をすべて data 属性に順序付きで溜め込んでいく
* canvas を保存する際に各 canvas 毎の描画情報を JSON.stringify で JSON 化する
* 復元するために、描画情報を持った JSON を localStorage に保存しておく
* canvas を復元する時は localStorage から描画情報を持った JSON を取得し、JSON.parse で描画情報として取り出す
* 描画情報を元に canvas の描画処理を順番に呼び出す

サンプルアプリ程度ならこんな適当な方法でも実装できそうな気がします。試してません。

2014/12/29 12:04:02
id:syamaoka

やる前から実装するのが面倒であることが分かるため、きっと回答は付かないと思いますので、ご自分で頑張ってみてください。

2014/12/29 12:07:23
id:rikuba No.2

rikuba回答回数26ベストアンサー獲得回数122014/12/29 18:31:30ここでベストアンサー

ポイント1000pt

http://jsdo.it/rikuba/6lJR
描画をオブジェクトとして扱うためにいろいろとコードを改変しています。

id:kimusdagre

ありがとうございます。参考になりました。

2015/01/03 21:01:54

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません