• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• rikuba2014/12/29 18:31:30

  満足1000pt

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

  スター

  • 

    1件のコメントを見る

  • kimusdagre 2015/01/03 21:01:54

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

    スター

その他の回答

• syamaoka2014/12/29 09:47:09

  0pt

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

  スター

  • 

    4件のコメントを見る

  • syamaoka 2014/12/29 09:51:37

    おそらく実装方法に興味があるかと思いますので補足しておきますと、canvas の toDataURL を使う方法はクロスドメインの制約を受けるため、別ドメインが絡む場合はその点には気を付けてください。

    スター

  • kimusdagre 2014/12/29 11:24:08

    　早速の回答ありがとうございます。png として save load するのは思いつきませんでした。
    　要件は満たしておりますが、restore 後に erase できないのでちょっと困ります。できれば、canvas を生成する処理自体を履歴として localStorage に保存する手法を知りたいです。
    　引き続き回答を募集致します。

    スター

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

    * canvas に対して線を描画する時(つまりマウスのイベントハンドリング)に、線の描画に必要な情報をすべて data 属性に順序付きで溜め込んでいく
    * canvas を保存する際に各 canvas 毎の描画情報を JSON.stringify で JSON 化する
    * 復元するために、描画情報を持った JSON を localStorage に保存しておく
    * canvas を復元する時は localStorage から描画情報を持った JSON を取得し、JSON.parse で描画情報として取り出す
    * 描画情報を元に canvas の描画処理を順番に呼び出す
    
    サンプルアプリ程度ならこんな適当な方法でも実装できそうな気がします。試してません。

    スター

  • syamaoka 2014/12/29 12:07:23

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

    スター

この質問へのコメント

質問の情報

登録日時

2014-12-29 03:34:11

終了日時

2015-01-03 21:03:51

回答条件

1人3回まで

この質問のカテゴリ

• コンピュータ
• ウェブ制作

この質問に含まれるキーワード

人気の質問

• すぐお金になる働き方で求人以外にありますか？業界人でなくても 需要あれば働けるという日本人の多いとこ…ao87453011日前
• 民法施行法（明治三十一年法律第十一号）という古い法令の第6条: 契印について⇒民法施行法： 第六条　私署…匿名質問者111日前
• 無料で、食べ物をもらったことありますか？たとえば、コンビニ、スーパーなど。…ao87453011日前
• 宅地建物取引士が集まる店はありますか？ao87453011日前
• 民間の求人で、即採用の求人は 未経験の職種でみつかりましたか？ao87453011日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ