/home/web6047/www/cgi-bin/prj/20180615-javascript／次の画面へフェードする/javascript.html

このファイル: /home/web6047/www/cgi-bin/prj/20180615-javascript／次の画面へフェードする/javascript.html

1 <!DOCTYPE html>
2 <head>
3 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
4 <title>画面から画面へフェードする</title>
5 <script>
6 /*
7 このJavaScriptは…
8 ・基本的なアニメーションの処理を行っている。
9 ・クラスを１つ定義している。（Anmクラス）
10 ・アニメは簡易的なプログラムで動いている。（ゲームのイベントスクリプトのような）
11 ・簡易的なプログラムで使用する関数を２つ定義してある。（script_fade()、script_changescreen() ）
12 */
13 console.log( "=============== script ==============" );

14 function $( id ) { return document.getElementById( id ); }

15 var HereDocument = /\/\*\s*([^]*?)\s*\*\//;
16 // usage: var txt = ( function() { /*multiTXT*/ } ).toString().match( HereDocument )[ 1 ];
17

18 function onloadx() {
19
20 canvasEL = document.getElementById( "canvasELID" );
21 canvas = canvasEL.getContext( "2d" );
22 canvas.font = "32px 'ＭＳＰゴシック'";
23
24 screenNum = 0;
25 draw();
26
27 timerID = setInterval( run, 200 );
28 anms = new Array();
29 onkeypress = function( e ) {
30 switch( e.which ) {
31 case 13:
32 screenNum = 0;
33 draw();
34 break;
35 case 32:
36 var anm = new Anm();
37 anm.program = [ //スペースキーが押されたら
38 [ "fade", 13 ], //fade関数を呼び、次に
39 [ "changescreen", 1 ], //changescreen関数を呼ぶ　という
40 ]; //簡易的なプログラム
41 anm.programCounter = 0;
42 anms.push( anm );
43 break;
44 default:
45
46 }
47 };
48 onclick = function( e ) {
49 onkeypress( { which : screenNum == 0 ? 32 : 13 } );
50 };
51 }

52 function run() {
53 var doDraw = false;
54
55 //アニメーション
56 for( var i = anms.length - 1; i >= 0; i-- ) {
57 var anm = anms[ i ];
58
59 doDraw = anm.step();
60 //check. プログラムが最終行に到達したらアニメ削除
61 if( ! anm.isRunning ) {
62 anms.splice( i, 1 );
63 }
64 }
65 if( doDraw ) {
66 draw();
67 }
68 }

70 function Anm() {
71 this.programCounter = 0;
72 this.isRunning = true;
73 }

74 Anm.prototype.step = function() {
75 //アニメを一コマ進める
76
77 var line = this.program[ this.programCounter ];
78 var funcname = line[ 0 ];
79 var funcargs = line.slice( 1 );
80
81 //プログラムの行で指定された関数を実行する
82 var result = window[ "script_" + funcname ]( this, funcargs );
83
84 this.programCounter += result.pc;
85 //check.
86 if( this.programCounter == this.program.length ) {
87 this.isRunning = false;
88 }
89
90 return result.doDraw;
91 };

93 function script_changescreen( owner, args ) {
94 //簡易的なプログラム　が呼ぶ関数
95 screenNum = args[ 0 ];
96 return {pc:1, doDraw:true,}; //pcはプログラムカウンタ加算値の意味
97 }

98 function script_fade( owner, args ) {
99 //簡易的なプログラム　が呼ぶ関数
100 var fadeCNTMAX = args[ 0 ];
101 //check.
102 if( typeof owner.fadeCNT == "undefined" ) {
103 owner.fadeCNT = 0;
104
105 //次の画面を取得
106 screenNum = 1;
107 draw();
108 owner.imageDataNew = canvas.getImageData( 0, 0, canvasEL.width, canvasEL.height );
109 //前の画面を取得
110 screenNum = 0;
111 draw();
112 owner.imageDataNow = canvas.getImageData( 0, 0, canvasEL.width, canvasEL.height );
113 }
114
115 //この関数が呼ばれるたびに、新しい画面のピクセルを少しずつコピーしていく
116 var length = canvasEL.width * canvasEL.height;
117 for( var i = 0; i < length / fadeCNTMAX; i++ ) {
118 var pos = ( i * fadeCNTMAX + owner.fadeCNT ) * 4;
119 owner.imageDataNow.data[ pos + 0 ] = owner.imageDataNew.data[ pos + 0 ];
120 owner.imageDataNow.data[ pos + 1 ] = owner.imageDataNew.data[ pos + 1 ];
121 owner.imageDataNow.data[ pos + 2 ] = owner.imageDataNew.data[ pos + 2 ];
122 owner.imageDataNow.data[ pos + 3 ] = owner.imageDataNew.data[ pos + 3 ];
123 }
124 canvas.putImageData( owner.imageDataNow, 0, 0 );
125
126 owner.fadeCNT ++;
127 //check.
128 if( owner.fadeCNT == fadeCNTMAX ) {
129 return {pc:1, doDraw:false,}; //終了時
130 } else {
131 return {pc:0, doDraw:false,}; //継続時
132 //プログラムカウンタ加算値が０なので、またこの関数が呼ばれる。
133 }
134 }

135

136 function draw() {
137 switch( screenNum ) {
138 case 0: //前の画面
139 canvas.fillStyle = "blue";
140 canvas.fillRect( 0,0, canvasEL.width, canvasEL.height );
141
142 canvas.fillStyle = "white";
143 canvas.save();
144 canvas.translate( canvasEL.width / 2, canvasEL.height / 2 );
145 canvas.fillRect( -100,-100, 200, 200 );
146 canvas.restore();
147
148 canvas.fillStyle = "black";
149 canvas.fillText( "PRESS SPACE KEY.", 100,400 );
150 break;
151 case 1: //次の画面
152 canvas.fillStyle = "magenta";
153 canvas.fillRect( 0,0, canvasEL.width, canvasEL.height );
154
155 canvas.fillStyle = "red";
156 canvas.save();
157 canvas.translate( canvasEL.width / 2, canvasEL.height / 2 );
158 canvas.rotate( 3.14 / 4, 3.14 / 4 );
159 canvas.fillRect( -100,-100, 200, 200 );
160 canvas.restore();
161
162 canvas.fillStyle = "black";
163 canvas.fillText( "next", 100,100 );
164 canvas.fillText( "PRESS RETURN KEY TO BACK.", 100,400 );
165 break;
166 }
167 }

168 </script>
169 <style>
170 </style>
171 </head>
172 <body onload="onloadx();" style="">
173 <canvas id="canvasELID" width="640" height="480" style="
174 border : solid 1px black;
175 ">
176 </canvas>
177 </body>
178 </html>