JS/canvas.js

   1 window.addEventListener("load", eventWindowLoaded, false);
   2
   3 var cancasmode = 0;
   4
   5 function tabcheck() {
   6     var introduce = document.getElementById('introduce');
   7     var ineh = document.getElementById('eucentricheightcontents');
   8     var inform = document.getElementById('form');
   9     var insingle = document.getElementById('simplephotecontents');
  10     var intomo = document.getElementById('tomography');
  11     var inmds = document.getElementById('mds');
  12
  13     if (insingle.style.display == "") {
  14         canvasmode = 1;
  15         //canvasApp();
  16         console.log("canvasmode=" + canvasmode);
  17     }else if(intomo.style.display ==""){
  18         canvasmode = 2;
  19         canvastomo();
  20         console.log("canvasmode=" + canvasmode);
  21     }else  if(inmds.style.display ==""){
  22         canvasmode =3;
  23         canvasmds();
  24         console.log("canvasmode=" + canvasmode);
  25     }else{
  26         canvasmode = 0;
  27         console.log("canvasmode=" + canvasmode);
  28     }
  29 }
  30
  31 function eventWindowLoaded() {
  32     //画面がロードされたら、canvasAppを呼び出す
  33   /*  if (canvasmode == 1) {
  34         //canvasApp();
  35     } else if (canvasmode == 2) {
  36         canvastomo();
  37     }
  38     */
  39    //canvasmds();
  40     //モード切り替えの初期formの色の設定
  41     document.getElementById("formmode").style.backgroundColor = '#e0ffff';
  42     document.getElementById("formmode2").style.backgroundColor = '#e0ffff';
  43     document.getElementById("formmode3").style.backgroundColor = '#e0ffff';
  44 }
  45 /*
  46  function canvasSupport(){
  47  return Modernizer.canvas;
  48  }
  49  */
  50 //var movex = document.forms.movestage.movex.value;
  51 //var movey = document.forms.movestage.movey.value;
  52 /*
  53  function putTxt(){
  54  document.onkeydown = funcKey;
  55  }
  56  */
  57
  58 //キャンバスの初期値の設定
  59 var movex = 1;
  60 var movey = 1;
  61 var movez = 0;
  62 var movea = 0;
  63 var mode = 0;
  64 var moveformx=0;
  65 var moveformy=0;
  66 var moveformz=0;
  67 var moveformas=0;
  68 var moveformat=0;
  69 var movingdistance =1;
  70 var tiltmode = 1;
  71
  72 function gamepad() {
  73     if (navigator.getGamepads) {
  74         // ゲームパッドリストを取得する
  75         var gamepad_list = navigator.getGamepads();
  76         // 出力テスト
  77         console.log(gamepad_list);
  78     }
  79     console.log("function gamepad");
  80     window.addEventListener("gamepadconnected", function(e) {
  81         console.log("gamepad connected!");
  82     });
  83
  84     if (window.GamepadEvent) {
  85
  86         // ------------------------------------------------------------
  87         // ゲームパッドを接続すると実行されるイベント
  88         // ------------------------------------------------------------
  89         window.addEventListener("gamepadconnected", function(e) {
  90             console.log("ゲームパッドが接続された");
  91             console.log(e.gamepad);
  92         });
  93
  94         // ------------------------------------------------------------
  95         // ゲームパッドの接続を解除すると実行されるイベント
  96         // ------------------------------------------------------------
  97         window.addEventListener("gamepaddisconnected", function(e) {
  98             console.log("ゲームパッドの接続が解除された");
  99             console.log(e.gamepad);
 100         });
 101
 102     }
 103     /*
 104      setInterval(function(e){
 105      var gamepad = e.gamepad;
 106      if (gamepad.axes[0] < -0.5) {
 107      movex = parseInt(movex) + parseInt(10);
 108      console.log("left!");
 109      ////canvasApp();
 110      }
 111      if (gamepad.axes[0] > 0.5) {
 112      movex = parseInt(movex) - parseInt(10);
 113      //canvasApp();
 114      }
 115      if (gamepad.axes[1] < -0.5) {
 116      movey = parseInt(movey) - parseInt(10);
 117      //canvasApp();
 118      }
 119      if (gamepad.axes[1] > 0.5) {
 120      movey = parseInt(movey) + parseInt(10);
 121      //canvasApp();
 122
 123      }
 124      },1000/60);
 125      */
 126
 127     setInterval(function() {
 128         var str = "";
 129         // ゲームパッドリストを取得する
 130         var gamepad_list = navigator.getGamepads();
 131         // ゲームパッドリスト内のアイテム総数を取得する
 132         var num = gamepad_list.length;
 133         var i;
 134         for (i = 0; i < num; i++) {
 135             // Gamepad オブジェクトを取得
 136             var gamepad = gamepad_list[i];
 137             if (!gamepad)
 138                 continue;
 139             // ゲームパッドのインデックス値
 140             str += "index: " + gamepad.index + "\n";
 141             // タイムスタンプ情報
 142             str += "timestamp: " + gamepad.timestamp + "\n";
 143             // ゲームパッドの識別名
 144             str += "id: \"" + gamepad.id + "\"\n";
 145             // ゲームパッドの物理的な接続状態
 146             str += "connected: " + gamepad.connected + "\n";
 147             // マッピングタイプ情報
 148             str += "mapping: \"" + gamepad.mapping + "\"\n";
 149
 150             // ボタンリスト
 151             // ------------------------------------------------------------
 152             var buttons = gamepad.buttons;
 153             str += "buttons: {\n";
 154             var j;
 155             var n = buttons.length;
 156             for (j = 0; j < n; j++) {
 157                 // GamepadButton オブジェクトを取得
 158                 var button = buttons[j];
 159                 str += "  \"" + j + "\": { ";
 160                 // ボタン押下状態
 161                 str += "pressed:" + button.pressed + " , ";
 162                 // ボタン入力強度
 163                 str += "value:" + button.value + " }\n";
 164             }
 165             str += "}\n";
 166             // 軸リスト
 167             // ------------------------------------------------------------
 168             if (mode == 2) {
 169                 var axes = gamepad.axes;
 170                 str += "axes: {\n";
 171                 var j;
 172                 var n = axes.length;
 173                 for (j = 0; j < n; j++) {
 174                     if (j == 0) {
 175                         if (axes[j] < -0.5) {
 176                             movex = parseInt(movex) - parseInt(1);
 177                             console.log(movex);
 178                             console.log(axes[j]);
 179                             stagecontrol('stage',movex,movey,movez,movea);
 180                             emcondition('request');
 181                             if (canvasmode == 1) {
 182                                 //canvasApp();
 183                             } else if (canvasmode == 2) {
 184                                 canvastomo();
 185                             } else if (canvasmode == 3) {
 186                                 canvasmds();
 187                             }
 188                         }
 189                         if (axes[j] > 0.5) {
 190                             movex = parseInt(movex) + parseInt(1);
 191                             stagecontrol('stage',movex,movey,movez,movea);
 192                             emcondition('request');
 193                             if (canvasmode == 1) {
 194                                 //canvasApp();
 195                             } else if (canvasmode == 2) {
 196                                 canvastomo();
 197                             } else if (canvasmode == 3){
 198                                 canvasmds();
 199                             }
 200                         }
 201                     } else if (j == 1) {
 202                         if (axes[j] < -0.5) {
 203                             movey = parseInt(movey) + parseInt(1);
 204                             stagecontrol('stage',movex,movey,movez,movea);
 205                             emcondition('request');
 206                             if (canvasmode == 1) {
 207                                 //canvasApp();
 208                             } else if (canvasmode == 2) {
 209                                 canvastomo();
 210                             } else if (canvasmode ==3 ) {
 211                                 canvasmds();
 212                             }
 213                         }
 214                         if (axes[j] > 0.5) {
 215                             movey = parseInt(movey) - parseInt(1);
 216                             stagecontrol('stage',movex,movey,movez,movea);
 217                             emcondition('request');
 218                             if (canvasmode == 1) {
 219                                 //canvasApp();
 220                             } else if (canvasmode == 2) {
 221                                 canvastomo();
 222                             } else if (canvasmode == 3){
 223                                 canvasmds();
 224                             }
 225                         }
 226                     }
 227                 }
 228             }
 229         }
 230     }, 1000 / 60);
 231
 232
 233     window.addEventListener("gamepaddisconnected", function(e) {
 234             console.log("gamepad disconnected");
 235         });
 236     window.addEventListener("gamepadconnected", function(e) {
 237         console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
 238                 e.gamepad.index, e.gamepad.id,
 239                 e.gamepad.buttons.length, e.gamepad.axes.length);
 240     });
 241
 242 };
 243
 244
 245 function canvasApp() {
 246     var theCanvas = document.getElementById("canvasOne");
 247     //canvasとして利用するhtmlのタグの場所を指定
 248     var context = theCanvas.getContext("2d");
 249     //2Dcontextの取得
 250
 251     function drawScreen() {
 252         //実際に画面の描写を行っている部分
 253         context.fillStyle = "fffffaa";
 254         //描画画面の塗りつぶし、今回は黒
 255         context.fillRect(0, 0, 540, 605);
 256         //画面上に形を作る
 257         if (mode == 0) {
 258             //if(document.forms.movestage.movex.value!=moveformx){
 259             moveformx = document.forms.movestage.movex.value;
 260             movex=parseInt(moveformx);
 261             //}
 262             //if(document.forms.movestage.movey.value!=moveformy){
 263             moveformy = document.forms.movestage.movey.value;
 264             movey=parseInt(moveformy);
 265
 266             moveformz = document.forms.moveza.movez.value;
 267             movez=parseInt(moveformz);
 268
 269
 270             stagecontrol('stage',movex,movey,movez,movea);
 271             emcondition('request');
 272             //}
 273                //画面上に入力した数値から位置を取得
 274         }
 275         /*
 276         var movez = document.forms.s2.movez.value;
 277
 278         if (movez == 0) {
 279             movez = 1;
 280         }
 281         */
 282         var img = new Image();
 283
 284         img.onload = function() {
 285             //イメージがロードするのを待つ必要があるのでonload
 286             //context.scale(movez*0.1,movez*0.1);
 287             //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
 288             //context.translate(540/2,605/2);
 289             context.drawImage(img, movex, movey);
 290             //イメージを描写、引数は画像のオブジェクト,左端のx,y
 291             document.getElementById("currentx").innerHTML = movex;
 292             document.getElementById("currenty").innerHTML = movey;
 293             console.log("x=" + movex);
 294             console.log("y=" + movey);
 295             var movingdistance = $("#movingdistance");
 296             console.log(movingdistance[0]);
 297         }
 298
 299         //見る画像
 300         img.src = "./image/CC124crudeダイニン.jpg";
 301
 302         //--ふちの設定--現在見えてない
 303         context.strokeStyle = "#000000";
 304         //線の色
 305         context.strokeRect(5, 5, 505, 610);
 306         //わくの輪郭を書く、引数は左端のx,y,幅,高さ
 307     }
 308     drawScreen();
 309 }
 310
 311 function canvastomo() {
 312     var theCanvas = document.getElementById("canvastomo");
 313     //canvasとして利用するhtmlのタグの場所を指定
 314     var context = theCanvas.getContext("2d");
 315     //2Dcontextの取得
 316
 317     function drawScreen() {
 318         //実際に画面の描写を行っている部分
 319         context.fillStyle = "fffffaa";
 320         //描画画面の塗りつぶし、今回は黒
 321         context.fillRect(0, 0, 540, 605);
 322         //画面上に形を作る
 323         if (mode == 0) {
 324             //if(document.forms.movestage.movex.value!=moveformx){
 325             moveformx = document.forms.movestagetomo.movex.value;
 326             movex=parseInt(moveformx);
 327             //}
 328             //if(document.forms.movestage.movey.value!=moveformy){
 329             moveformy = document.forms.movestagetomo.movey.value;
 330             movey=parseInt(moveformy);
 331
 332             moveformz = document.forms.moveztomo.movez.value;
 333             movez=parseInt(moveformz);
 334
 335             if (tiltmode == 1) {
 336                 moveformas = document.forms.setting.standardnum.value;
 337                 movea = parseInt(moveformas);
 338                 stagecontrol('stage', movex, movey, movez, movea);
 339                 emcondition('request');
 340             } else if (tiltmode == 2) {
 341                 moveformat = document.forms.setting.tiltingnum.value;
 342                 movea = parseInt(moveformat);
 343                 stagecontrol('stage', movex, movey, movez, movea*(Math.cos(movea * (Math.PI / 180))));
 344                 emcondition('request');
 345             }
 346             stagecontrol('stage',movex,movey,movez,movea);
 347             emcondition('request');
 348             //}
 349                //画面上に入力した数値から位置を取得
 350         }
 351         /*
 352         var movez = document.forms.s2.movez.value;
 353
 354         if (movez == 0) {
 355             movez = 1;
 356         }
 357         */
 358         var img = new Image();
 359
 360         img.onload = function() {
 361             //イメージがロードするのを待つ必要があるのでonload
 362             //context.scale(movez*0.1,movez*0.1);
 363             //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
 364             //context.translate(540/2,605/2);
 365             context.drawImage(img, movex, movey);
 366             //イメージを描写、引数は画像のオブジェクト,左端のx,y
 367             document.getElementById("currenttomox").innerHTML = movex;
 368             document.getElementById("currenttomoy").innerHTML = movey;
 369             console.log("x=" + movex);
 370             console.log("y=" + movey);
 371         }
 372
 373         //見る画像
 374         img.src = "./image/axoF11-2 .jpg";
 375
 376         //--ふちの設定--現在見えてない
 377         context.strokeStyle = "#000000";
 378         //線の色
 379         context.strokeRect(5, 5, 505, 610);
 380         //わくの輪郭を書く、引数は左端のx,y,幅,高さ
 381     }
 382     drawScreen();
 383 }
 384
 385 function controlmodeselect(modename){
 386         document.getElementById("key").style.backgroundColor = 'transparent';
 387         document.getElementById("key2").style.backgroundColor = 'transparent';
 388         document.getElementById("key3").style.backgroundColor = 'transparent';
 389         document.getElementById("formmode").style.backgroundColor = 'transparent';
 390         document.getElementById("formmode2").style.backgroundColor = 'transparent';
 391         document.getElementById("formmode3").style.backgroundColor = 'transparent';
 392         document.getElementById("gamepad").style.backgroundColor = 'transparent';
 393         document.getElementById("gamepad2").style.backgroundColor = 'transparent';
 394         document.getElementById("gamepad3").style.backgroundColor = 'transparent';
 395
 396         if(modename){
 397             document.getElementById(modename).style.backgroundColor = '#e0ffff';
 398         }
 399 }
 400
 401
 402 /*
 403  * To change this license header, choose License Headers in Project Properties.
 404  * To change this template file, choose Tools | Templates
 405  * and open the template in the editor.
 406  */
 407
 408 function tilt() {
 409      radio = document.getElementsByName('tilting');
 410      document.getElementById('angurar').innerHTML= document.forms.setting.tiltingnum.value;
 411     if (radio[0].checked) {
 412         tiltmode=1;
 413         document.getElementById('standard').style.display = "";
 414         document.getElementById('saxtorn').style.display = "none";
 415     } else if (radio[1].checked) {
 416         tiltmode=2;
 417         document.getElementById('standard').style.display = "none";
 418         document.getElementById('saxtorn').style.display = "";
 419     }
 420 }
 421
 422 function canvasmds() {
 423     var theCanvas = document.getElementById("canvasmds");
 424     //canvasとして利用するhtmlのタグの場所を指定
 425     var context = theCanvas.getContext("2d");
 426     //2Dcontextの取得
 427     function drawScreen() {
 428         //実際に画面の描写を行っている部分
 429         context.fillStyle = "fffffaa";
 430         //描画画面の塗りつぶし、今回は黒
 431         context.fillRect(0, 0, 540, 605);
 432         //画面上に形を作る
 433         if (mode == 0) {
 434             //if(document.forms.movestage.movex.value!=moveformx){
 435             moveformx = document.forms.movestagemds.movex.value;
 436             movex=parseInt(moveformx);
 437             //}
 438             //if(document.forms.movestage.movey.value!=moveformy){
 439             moveformy = document.forms.movestagemds.movey.value;
 440             movey=parseInt(moveformy);
 441
 442             moveformz = document.forms.movezmds.movez.value;
 443             movez=parseInt(moveformz);
 444
 445
 446             stagecontrol('stage',movex,movey,movez,movea);
 447             emcondition('request');
 448             //}
 449                //画面上に入力した数値から位置を取得
 450         }
 451         /*
 452         var movez = document.forms.s2.movez.value;
 453
 454         if (movez == 0) {
 455             movez = 1;
 456         }
 457         */
 458         var img = new Image();
 459
 460         img.onload = function() {
 461             //イメージがロードするのを待つ必要があるのでonload
 462             //context.scale(movez*0.1,movez*0.1);
 463             //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
 464             //context.translate(540/2,605/2);
 465             context.drawImage(img, movex, movey);
 466             //イメージを描写、引数は画像のオブジェクト,左端のx,y
 467             document.getElementById("currentmdsx").innerHTML = movex;
 468             document.getElementById("currentmdsy").innerHTML = movey;
 469             console.log("x=" + movex);
 470             console.log("y=" + movey);
 471         }
 472
 473         //見る画像
 474         img.src = "./image/flower.jpg";
 475
 476         //--ふちの設定--現在見えてない
 477         context.strokeStyle = "#000000";
 478         //線の色
 479         context.strokeRect(5, 5, 505, 610);
 480         //わくの輪郭を書く、引数は左端のx,y,幅,高さ
 481     }
 482     drawScreen();
 483 }
 484
 485 function shiftplace() {
 486     mode = 4;
 487     movex = parseInt(movex) + parseInt(10);
 488     stagecontrol('stage', movex, movey, movez, movea);
 489     emcondition('request');
 490     canvasmds();
 491 }
 492
 493 function replace() {
 494     mode = 4;
 495     movex = parseInt(movex) - parseInt(10);
 496     stagecontrol('stage', movex, movey, movez, movea);
 497     emcondition('request');
 498     canvasmds();
 499
 500 }
 501
 502 function canvasroot() {
 503     var theCanvas = document.getElementById("canvasroot");
 504     //canvasとして利用するhtmlのタグの場所を指定
 505     var context = theCanvas.getContext("2d");
 506     //2Dcontextの取得
 507
 508     function drawScreen() {
 509         //実際に画面の描写を行っている部分
 510         context.fillStyle = "fffffaa";
 511         //描画画面の塗りつぶし、今回は黒
 512         context.fillRect(0, 0, 200, 200);
 513         //画面上に形を作る
 514        /* if (mode == 0) {
 515             //if(document.forms.movestage.movex.value!=moveformx){
 516             moveformx = document.forms.movestage.movex.value;
 517             movex=parseInt(moveformx);
 518             //}
 519             //if(document.forms.movestage.movey.value!=moveformy){
 520             moveformy = document.forms.movestage.movey.value;
 521             movey=parseInt(moveformy);
 522
 523             moveformz = document.forms.moveza.movez.value;
 524             movez=parseInt(moveformz);
 525
 526
 527             stagecontrol('stage',movex,movey,movez,movea);
 528             emcondition('request');
 529             //}
 530                //画面上に入力した数値から位置を取得
 531         }*/
 532         /*
 533         var movez = document.forms.s2.movez.value;
 534
 535         if (movez == 0) {
 536             movez = 1;
 537         }
 538         */
 539         var img = new Image();
 540
 541         img.onload = function() {
 542             //イメージがロードするのを待つ必要があるのでonload
 543             //context.scale(movez*0.1,movez*0.1);
 544             //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
 545             //context.translate(540/2,605/2);
 546             context.drawImage(img, movex, movey);
 547             //イメージを描写、引数は画像のオブジェクト,左端のx,y
 548             document.getElementById("currentx").innerHTML = movex;
 549             document.getElementById("currenty").innerHTML = movey;
 550             console.log("x=" + movex);
 551             console.log("y=" + movey);
 552
 553         }
 554
 555         //見る画像
 556         img.src = "./image/ele.jpg";
 557
 558         //--ふちの設定--現在見えてない
 559         context.strokeStyle = "#000000";
 560         //線の色
 561         context.strokeRect(5, 5, 505, 610);
 562         //わくの輪郭を書く、引数は左端のx,y,幅,高さ
 563     }
 564     drawScreen();
 565 }