/home/web6047/www/cgi-bin/prj/20190504-javascript／動きながら画面遷移/新規 HTML ドキュメント.html

このファイル: /home/web6047/www/cgi-bin/prj/20190504-javascript／動きながら画面遷移/新規 HTML ドキュメント.html

1 <!DOCTYPE html>
2 <head>
3 <title>UntitledHomepage6047Document</title>
4 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
5 <script>console.clear();</script>
6 
7 <script>
8 /*
9 このスクリプトは特に著作権その他の権利を主張しませんので、気にせず自由に使ってください。
10
11 スクリプトの作者：homepage6047 d_kawakawaより
12 */
13
14
15 //スクリーントーン１６種類の作成

16 function makeTones( e ) {
17 /*
18 テキストデータで作ったパターンからfillStyle用のパターン画像を作りたい。
19
20 1. テキストデータからImageDataを作成する。
21 2. そのImageDataをCANVASに描画する。
22 3. そのCANVASをtoDataURL()を使って、Imageにする。
23 4. そのImageからcreatePattern()でfillStyle用のパターンにする。
24
25 ※テキストデータはプログラムの最後にあります。
26 ※ImageDataからcreatePattern()できれば良かったのですができなかったです。
27 */
28
29 //裏画面で作業する
30 var bc = document.getElementById( "backCanvas" ).getContext( "2d" );
31
32 if( ! e ) {
33 //最初に呼ばれたとき
34
35 //1. テキストデータからImageDataを作成する。
36 screenTones = new Array();
37 widthBak = bc.canvas.width;
38 heightBak = bc.canvas.height;
39 bc.canvas.width = 16;
40 bc.canvas.height = 16;
41 //スクリーントーンそれぞれについて
42 for( var i = 0; i < screenToneData.length; i++ ) {
43 //oneScreenToneData -> ImageData
44 var oneScreenToneData = screenToneData[ i ];
45 var im = bc.createImageData( 4, 4 );
46 for( var y = 0; y < 4; y++ ) {
47 for( var x = 0; x < 4; x++ ) {
48 var v = Number( oneScreenToneData[ y ].substr( x, 1 ) ) * 255;
49 var p = ( y * 4 + x ) * 4;
50 im.data[ p++ ] = v; //R
51 im.data[ p++ ] = v; //G
52 im.data[ p++ ] = v; //B
53 im.data[ p++ ] = v; //A
54 }
55 }
56 //2. そのImageDataをCANVASに描画する。
57 for( var y = 0; y < 4; y++ ) {
58 for( var x = 0; x < 4; x++ ) {
59 bc.putImageData( im, x * 4, y * 4 );
60 }
61 }
62 //3. そのCANVASをtoDataURL()を使って、Imageにする。
63 var image = new Image();
64 image.onload = makeTones;
65 image.src = bc.canvas.toDataURL( 'image/png' );
66 //すぐにcompleteしないからonloadイベントでこの関数を呼びなおす
67 }
68 } else {
69 //image.onloadで呼ばれたとき
70
71 //4. そのImageからcreatePattern()でfillStyle用のパターンにする。
72 screenTones.push( bc.createPattern( e.target, "" ) );
73 //check.　全作成完了
74 if( screenTones.length == screenToneData.length ) {
75 bc.canvas.width = widthBak;
76 bc.canvas.height = heightBak;
77
78 //テスト描画
79 if( 0 ) {
80 for( var i = 0; i < screenTones.length; i++ ) {
81 bc.fillStyle = screenTones[ i ];
82 bc.fillRect( i * 32, 0, 32, 32 );
83 }
84 alert( "screenTones" );
85 }
86
87 //プログラム開始
88 onloadx();
89 }
90 }
91 }

93 function onloadx() {
94 console.log( "onloadx()" );
95
96 //canvas
97 fc = document.getElementById( "frontCanvas" ).getContext( "2d" ); //表
98 bc = document.getElementById( "backCanvas" ).getContext( "2d" ); //裏
99 bc.canvas.style.display = "none";
100
101 //制御用
102 fade = false;
103 theme = 'A';
104
105 //theme A,Bそれぞれの動き用
106 a = 0;
107 b = fc.canvas.width / 2;
108 directionA = 1;
109 directionB = 1;
110
111 //開始
112 timerID= setInterval( frame, 100 );
113
114 fc.canvas.onclick = function( e ) {
115 sampleStart();
116 }
117
118 }//onloadx()

119
120 //２つの画面を切り替えるサンプルを実行

121 function sampleStart() {
122 //メイン画面はすぐに切り替えてしまう（主導権はすぐに新しいほうへ）
123 theme = theme == 'A' ? 'B' : 'A';
124 fade = true;
125 fadeCnt = 0;
126 }

127
128 //setIntervalによる一コマ

129 function frame() {
130 //メイン画面を表画面に描画
131 if( theme == 'A' ) {
132 frameA( fc );
133 } else {
134 frameB( fc );
135 }
136
137 //エフェクト時
138 if( fade ) {
139 //現在メイン画面ではなくなったほうを裏画面に描画
140 if( theme == 'A' ) {
141 frameB( bc );
142 } else {
143 frameA( bc );
144 }
145
146 //その裏画面をスクリーントーンでくりぬく（くりぬかれた部分は透明）
147 bc.save();
148 bc.globalCompositeOperation = "destination-in"; //パターンの透明部分で、元をくりぬく
149 bc.fillStyle = screenTones[ screenTones.length - 1 - fadeCnt ]; //登録したものと逆順
150 bc.fillRect( 0, 0, bc.canvas.width, bc.canvas.height );
151 bc.restore();
152 //その裏画面を表画面へ描画
153 fc.drawImage( bc.canvas, 0, 0 ); //canvas自体をdrawImage()できるのが便利だ…
154
155 fadeCnt++;
156 //check.　エフェクトの終了
157 if( fadeCnt == screenTones.length ) {
158 fade = false;
159 }
160
161 //※エフェクトが終わると、メイン画面ではないほうの動きは停止。
162 }
163 }

164

165 function frameA( cc ) {
166 //適当なアニメの１コマを描画
167 cc.fillStyle = "salmon";
168 cc.fillRect( 0, 0, cc.canvas.width, cc.canvas.height );
169 cc.fillStyle = "blue";
170 cc.save();
171 cc.translate( a, 150 );
172 cc.rotate( a / 10 );
173 cc.fillRect( -50, -50, 100,100 );
174 cc.restore();
175 a += directionA * 2;
176 //check.
177 if( a <= 0 || a >= cc.canvas.width ) directionA *= -1;
178 }

179

180 function frameB( cc ) {
181 //適当なアニメの１コマを描画
182 cc.fillStyle = "white";
183 cc.fillRect( 0, 0, cc.canvas.width, cc.canvas.height );
184 cc.fillStyle = "red";
185 cc.save();
186 cc.translate( b, 150 );
187 cc.rotate( -b / 20 );
188 cc.fillRect( -50, -50, 100,100 );
189 cc.restore();
190 b += directionB * 4;
191 //check.
192 if( b <= 0 || b >= cc.canvas.width ) directionB *= -1;
193 }

194
195 //スクリーントーンのテキストデータ
196 var screenToneData = [
197 [//1
198 "0000",
199 "0000",
200 "0000",
201 "0000",
202 ],
203 [//2
204 "0000",
205 "0000",
206 "0000",
207 "0010",
208 ],
209 [//3
210 "0000",
211 "0000",
212 "0000",
213 "1010",
214 ],
215 [//4
216 "0000",
217 "0000",
218 "0001",
219 "1010",
220 ],
221 [//5
222 "0001",
223 "0000",
224 "0001",
225 "1010",
226 ],
227 [//6
228 "0001",
229 "1000",
230 "0001",
231 "1010",
232 ],
233 [//7
234 "0001",
235 "1010",
236 "0001",
237 "1010",
238 ],
239 [//8
240 "0001",
241 "1010",
242 "0101",
243 "1010",
244 ],
245 [//9
246 "0101",
247 "1010",
248 "0101",
249 "1010",
250 ],
251 [//10
252 "0101",
253 "1010",
254 "0101",
255 "1110",
256 ],
257 [//11
258 "0101",
259 "1011",
260 "0101",
261 "1110",
262 ],
263 [//12
264 "0101",
265 "1011",
266 "0101",
267 "1111",
268 ],
269 [//13
270 "0101",
271 "1111",
272 "0101",
273 "1111",
274 ],
275 [//14
276 "0101",
277 "1111",
278 "1101",
279 "1111",
280 ],
281 [//15
282 "0111",
283 "1111",
284 "1101",
285 "1111",
286 ],
287 [//16
288 "0111",
289 "1111",
290 "1111",
291 "1111",
292 ],
293 ];
294 </script>
295 <style>
296 </style>
297 </head>
298 <body onload="makeTones()">
299 Hello.<BR>
300 <canvas id="frontCanvas" width="640" height="240" style="border:solid 1px black;"></canvas><BR>
301 <canvas id="backCanvas" width="640" height="240" style="border:solid 1px black;"></canvas><BR>
302 - click this canvas -
303 <div id="console"></div>
304 </body>
305 </html>