JS/map.js

   1
   2 window.onload=canvasMap;
   3 function canvasMap(){
   4   var canvas = document.getElementById("canvasMap");
   5   var ctx = canvas.getContext("2d");
   6   var x = $("#movex").val();
   7   var y = $("#movey").val();
   8   var z = $("#movez").val();
   9   var a = $("#movea").val();
  10
  11   ctx.beginPath();
  12   ctx.fillStyle = "#808080";
  13   ctx.arc(100,100,100,0,Math.PI*2,true);
  14   ctx.fill();
  15   ctx.closePath();
  16
  17
  18   canvas.addEventListener("mousedown",function(e){
  19     $.ajax({
  20       type:"GET",
  21       url:"http://"+UrlElement['sendIpAddress']+
  22       ":"+UrlElement['sendPortNumber']+
  23       "/"+UrlElement['sendManufacturer']+
  24       "/set/stagea?x="+encodeURIComponent(x)+
  25       "&y="+encodeURIComponent(y)+
  26       "&z="+encodeURIComponent(z)+
  27       "&a="+encodeURIComponent(z),
  28       success: function(data){
  29         console.log(data);
  30       }
  31     });
  32   });
  33 }
  34
  35 function canvasMapDraw(){
  36   var step = (1/2000);//倍率変化はここの通知を変化
  37   var canvas = document.getElementById("canvasMap");
  38   var ctx = canvas.getContext("2d");
  39   var x = $("#movex").val();
  40   var y = $("#movey").val();
  41   if(x == 0 || y==0){
  42   ctx.beginPath();
  43   ctx.fillStyle = "#000000";
  44   ctx.moveTo(100,100);
  45   ctx.lineTo((parseInt(x)*step)+100,-(parseInt(y)*step)+100);
  46   //ctx.lineTo(150,100)
  47   ctx.closePath();
  48   ctx.stroke();
  49   moveX = (parseInt(x)*step)+100;
  50   moveY = -(parseInt(y)*step)+100;
  51 }
  52   else if(x !=0 || y!= 0){
  53   ctx.beginPath();
  54   ctx.fillStyle = "#000000";
  55   ctx.moveTo(moveX,moveY);
  56   ctx.lineTo((parseInt(x)*step)+100,-(parseInt(y)*step)+100);
  57   //ctx.lineTo(150,100)
  58   ctx.closePath();
  59   ctx.stroke();
  60   moveX = (parseInt(x)*step)+100;
  61   moveY = -(parseInt(y)*step)+100;
  62 }
  63 }