質問編集履歴
2
syuusei
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
###実現したい事
|
|
2
|
-
JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。
|
|
2
|
+
JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。何か解決策が分かる方、回答お願いします。
|
|
3
|
-
1枚目の絵を描く→進ボタンを押すと白紙(2枚目)が表示される→2枚目の絵を描く→進ボタンを押すと白紙(3枚目)が表示される.
|
|
4
|
-
白紙(3枚目)が表示された状態で戻るを押す→2枚目の絵が表示される→その状態で戻るボタンを押す→
|
|
5
|
-
1枚目の絵が表示される。
|
|
6
|
-
といった感じです。
|
|
7
|
-
何か解決策が分かる方、回答お願いします。
|
|
8
3
|
###ソース(修正後)
|
|
9
4
|
```JavaScript
|
|
10
5
|
var canvas = document.getElementById('canvassample'),
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
###実現したい事
|
|
2
|
-
JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。
|
|
3
|
-
|
|
2
|
+
JavaScriptのお絵かきツールで絵をかいて進むボタンを押すと新しい用紙に移って、戻るボタンを押すと前に描いた絵が表示されるという機能を実装したいのですが、なかなかうまくいきません。現状では一枚の絵ではなく一筆書きで書いた部分までが保存され、戻るを押すと一筆前の画像に戻って、進むを押すと一筆後の画像が表示されるという状況です。最終的に実現したいのは
|
|
3
|
+
1枚目の絵を描く→進ボタンを押すと白紙(2枚目)が表示される→2枚目の絵を描く→進ボタンを押すと白紙(3枚目)が表示される.
|
|
4
|
+
白紙(3枚目)が表示された状態で戻るを押す→2枚目の絵が表示される→その状態で戻るボタンを押す→
|
|
5
|
+
1枚目の絵が表示される。
|
|
6
|
+
といった感じです。
|
|
7
|
+
何か解決策が分かる方、回答お願いします。
|
|
8
|
+
###ソース(修正後)
|
|
4
9
|
```JavaScript
|
|
5
10
|
var canvas = document.getElementById('canvassample'),
|
|
6
11
|
ctx = canvas.getContext('2d'),
|
|
7
12
|
moveflg = 0,
|
|
8
13
|
Xpoint,
|
|
9
14
|
Ypoint,
|
|
15
|
+
count = 0,
|
|
10
16
|
currentCanvas,
|
|
11
17
|
temp = [];
|
|
12
18
|
|
|
@@ -71,7 +77,7 @@
|
|
|
71
77
|
}
|
|
72
78
|
moveflg = 0;
|
|
73
79
|
|
|
74
|
-
|
|
80
|
+
// setLocalStoreage();
|
|
75
81
|
}
|
|
76
82
|
|
|
77
83
|
function resetCanvas() {
|
|
@@ -99,6 +105,10 @@
|
|
|
99
105
|
}
|
|
100
106
|
|
|
101
107
|
function prevCanvas(){
|
|
108
|
+
if(count == 0){
|
|
109
|
+
return ;
|
|
110
|
+
}
|
|
111
|
+
setLocalStoreage();
|
|
102
112
|
var logs = JSON.parse(myStorage.getItem("__log"));
|
|
103
113
|
|
|
104
114
|
if(logs.length > 0)
|
|
@@ -113,13 +123,15 @@
|
|
|
113
123
|
|
|
114
124
|
}, 0);
|
|
115
125
|
}
|
|
126
|
+
count--;
|
|
116
127
|
}
|
|
117
128
|
|
|
118
129
|
function nextCanvas(){
|
|
130
|
+
setLocalStoreage();
|
|
119
131
|
var logs = JSON.parse(myStorage.getItem("__log"));
|
|
120
132
|
|
|
121
|
-
|
|
133
|
+
// if(temp.length > 0)
|
|
122
|
-
{
|
|
134
|
+
//{
|
|
123
135
|
logs.unshift(temp.shift());
|
|
124
136
|
|
|
125
137
|
setTimeout(function(){
|
|
@@ -129,7 +141,8 @@
|
|
|
129
141
|
draw(logs[0]['png']);
|
|
130
142
|
|
|
131
143
|
}, 0);
|
|
132
|
-
}
|
|
144
|
+
//}
|
|
145
|
+
count++;
|
|
133
146
|
}
|
|
134
147
|
|
|
135
148
|
function draw(src) {
|