人力検索はてな
ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら
i-mobile
JavaScript + HTML5 Canvasに関する質問です｡
http://jsdo.it/uhauha909/5zoU のﾌﾟﾛｸﾞﾗﾑをlocalStorageにﾃﾞｰﾀを保存するように修正してください｡回答はｿｰｽｺｰﾄﾞにてお願いします｡一番早い回答者様に最大ﾎﾟｲﾝﾄを差し上げます｡
●質問者: kimusdagre
●ｶﾃｺﾞﾘ:ｺﾝﾋﾟｭｰﾀ ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 2/2件
▽最新の回答へ
▽1 ● syamaoka
●0ﾎﾟｲﾝﾄ

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

要件を満たせているか分かりませんが､localStorage に canvas を base64 にして保存するようにしてみました｡保存する際に複数の canvas を1つの画像ﾃﾞｰﾀにまとめてしまっているので､restore した後に erase できません｡ちゃんと復元できるようにするとなると､canvas を生成する処理自体を履歴として localStorage に保存しておき､復元時にその操作を再生する方式が考えられるでしょう｡今回は手間がかかるため実装してません｡
はてなﾎﾟｲﾝﾄは使い道がないので不要です｡

syamaokaさんのｺﾒﾝﾄ
おそらく実装方法に興味があるかと思いますので補足しておきますと､canvas の toDataURL を使う方法はｸﾛｽﾄﾞﾒｲﾝの制約を受けるため､別ﾄﾞﾒｲﾝが絡む場合はその点には気を付けてください｡
kimusdagreさんのｺﾒﾝﾄ
早速の回答ありがとうございます｡png として save load するのは思いつきませんでした｡ 要件は満たしておりますが､restore 後に erase できないのでちょっと困ります｡できれば､canvas を生成する処理自体を履歴として localStorage に保存する手法を知りたいです｡ 引き続き回答を募集致します｡
syamaokaさんのｺﾒﾝﾄ
* canvas に対して線を描画する時(つまりﾏｳｽのｲﾍﾞﾝﾄﾊﾝﾄﾞﾘﾝｸﾞ)に､線の描画に必要な情報をすべて data 属性に順序付きで溜め込んでいく * canvas を保存する際に各 canvas 毎の描画情報を JSON.stringify で JSON 化する * 復元するために､描画情報を持った JSON を localStorage に保存しておく * canvas を復元する時は localStorage から描画情報を持った JSON を取得し､JSON.parse で描画情報として取り出す * 描画情報を元に canvas の描画処理を順番に呼び出す ｻﾝﾌﾟﾙｱﾌﾟﾘ程度ならこんな適当な方法でも実装できそうな気がします｡試してません｡
syamaokaさんのｺﾒﾝﾄ
やる前から実装するのが面倒であることが分かるため､きっと回答は付かないと思いますので､ご自分で頑張ってみてください｡
▽2 ● rikuba
●1000ﾎﾟｲﾝﾄ ﾍﾞｽﾄｱﾝｻｰ

http://jsdo.it/rikuba/6lJR
描画をｵﾌﾞｼﾞｪｸﾄとして扱うためにいろいろとｺｰﾄﾞを改変しています｡

kimusdagreさんのｺﾒﾝﾄ
ありがとうございます｡参考になりました｡
関連質問
●質問をもっと探す●

0.人力検索はてなﾄｯﾌﾟ
8.このﾍﾟｰｼﾞを友達に紹介
9.このﾍﾟｰｼﾞの先頭へ
□対応機種一覧
□お問い合わせ
□ﾍﾙﾌﾟ/お知らせ
□ﾛｸﾞｲﾝ
□無料ﾕｰｻﾞｰ登録
□はてなﾄｯﾌﾟ