Javascript HTML5画布触摸操纵杆性能问题_Javascript_Html_Performance_Touch

Javascript HTML5画布触摸操纵杆性能问题

javascript html performance

Javascript HTML5画布触摸操纵杆性能问题,javascript,html,performance,touch,Javascript,Html,Performance,Touch,我试图在HTML5画布上创建虚拟触摸操纵杆。我找到了几个解决方案，其中一个确实有效，但它太复杂了，我无法修改，所以我自己做了很多工作，但它有一些问题。它不能同时支持两个操纵杆，而且速度非常慢：请告诉我该怎么走。我的html代码如下所示： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8">

我试图在HTML5画布上创建虚拟触摸操纵杆。我找到了几个解决方案，其中一个确实有效，但它太复杂了，我无法修改，所以我自己做了很多工作，但它有一些问题。它不能同时支持两个操纵杆，而且速度非常慢：请告诉我该怎么走。我的html代码如下所示：

<!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0;"> 
  <title>Touch controller</title>
  <link rel="stylesheet" href="css/virtualjoystick.css">
  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/touch.js"></script>
</head>
<body>
  <div class="container" id="video">
    <canvas height="977" width="1920" id="canvas"></canvas>
  </div>
</body>
</html>

//touch control JavaScript
$(document).ready(function(){
  //setup
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  resetCanvas(c);

  //handlers
  $("#canvas").mousedown(function(e){
    if(side(e.clientX) == "left"){
      if(!left.isset){
        //alert("left");
        left.isset = true;
        left.startX = e.clientX;
        left.startY = e.clientY;
        left.curX = e.clientX;
        left.curY = e.clientY;
        refreshCanvas(ctx);
      }
    }
    else if(side(e.clientX) == "right"){
      if(!right.isset){
        //alert("left");
        right.isset = true;
        right.startX = e.clientX;
        right.startY = e.clientY;
        right.curX = e.clientX;
        right.curY = e.clientY;
        refreshCanvas(ctx);
      }
    }
  });
  $("#canvas").mousemove(function(e){
    if(side(e.clientX) == "left"){
      if(left.isset){
        left.curX = e.clientX;
        left.curY = e.clientY;
        refreshCanvas(ctx);
      }
    }
    else if(side(e.clientX) == "right"){
      if(right.isset){
        right.curX = e.clientX;
        right.curY = e.clientY;
        refreshCanvas(ctx);
      }
    }
  });
  $("#canvas").mouseup(function(e){
    if(side(e.clientX) == "left"){
      if(left.isset){
        //alert("left");
        left.isset = false;
        left.startX = false;
        left.startY = false;
        left.curX = false;
        left.curY = false;
        refreshCanvas(ctx);
      }
    }
    else if(side(e.clientX) == "right"){
      if(right.isset){
        //alert("left");
        right.isset = false;
        right.startX = false;
        right.startY = false;
        right.curX = false;
        right.curY = false;
        refreshCanvas(ctx);
      }
    }
  });
});

var left = {isset:false};
var right = {isset:false};

function resetCanvas(c){
  c.width = $(window).innerWidth();
  c.height = $(window).innerHeight();
  //c.scrollTo(0,0);
}

function refreshCanvas(ctx){
  ctx.clearRect(0,0,1920,1080);
  if(left.isset){
    drawBase(ctx, left.startX, left.startY);
    drawHandle(ctx, left.startX, left.startY, left.curX, left.curY);
  }
  if(right.isset){
    drawBase(ctx, right.startX, right.startY);
    drawHandle(ctx, right.startX, right.startY, right.curX, right.curY);
  }
}

function drawBase(ctx, x, y){
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.arc(x,y,40,0,2*Math.PI);
  ctx.stroke();
}

function drawHandle(ctx, startX, startY, curX, curY){
  //stop handle when leaving joystick
  var x = curX - startX;
  var y = curY - startY;
  if( ( (x*x) + (y*y) ) >= (1600) ){
    var f = y/x;
    if(x < 0) var invert = true;    
    x = 0;
    y = 0;
    while( ( (x*x) + (y*y) ) <= (1600) ){
      y = x*f;
      if(invert) x--;
      else x++;
    }
    x += startX;
    y += startY;    
  }
  else {
    x = curX;
    y = curY;
  }

  ctx.beginPath();
  ctx.lineWidth = 4;
  ctx.arc(x,y,20,0,2*Math.PI);
  ctx.stroke();
}

function side(x){
  var c = document.getElementById("canvas");
  var dead = c.width/20;
  var left = (c.width - dead)/2;
  var right = left + dead;
  if(x < left) return "left";
  else if(x > right) return "right";
  else return false;
}

touch.js是这样的：

<!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0;"> 
  <title>Touch controller</title>
  <link rel="stylesheet" href="css/virtualjoystick.css">
  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/touch.js"></script>
</head>
<body>
  <div class="container" id="video">
    <canvas height="977" width="1920" id="canvas"></canvas>
  </div>
</body>
</html>

//touch control JavaScript
$(document).ready(function(){
  //setup
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  resetCanvas(c);

  //handlers
  $("#canvas").mousedown(function(e){
    if(side(e.clientX) == "left"){
      if(!left.isset){
        //alert("left");
        left.isset = true;
        left.startX = e.clientX;
        left.startY = e.clientY;
        left.curX = e.clientX;
        left.curY = e.clientY;
        refreshCanvas(ctx);
      }
    }
    else if(side(e.clientX) == "right"){
      if(!right.isset){
        //alert("left");
        right.isset = true;
        right.startX = e.clientX;
        right.startY = e.clientY;
        right.curX = e.clientX;
        right.curY = e.clientY;
        refreshCanvas(ctx);
      }
    }
  });
  $("#canvas").mousemove(function(e){
    if(side(e.clientX) == "left"){
      if(left.isset){
        left.curX = e.clientX;
        left.curY = e.clientY;
        refreshCanvas(ctx);
      }
    }
    else if(side(e.clientX) == "right"){
      if(right.isset){
        right.curX = e.clientX;
        right.curY = e.clientY;
        refreshCanvas(ctx);
      }
    }
  });
  $("#canvas").mouseup(function(e){
    if(side(e.clientX) == "left"){
      if(left.isset){
        //alert("left");
        left.isset = false;
        left.startX = false;
        left.startY = false;
        left.curX = false;
        left.curY = false;
        refreshCanvas(ctx);
      }
    }
    else if(side(e.clientX) == "right"){
      if(right.isset){
        //alert("left");
        right.isset = false;
        right.startX = false;
        right.startY = false;
        right.curX = false;
        right.curY = false;
        refreshCanvas(ctx);
      }
    }
  });
});

var left = {isset:false};
var right = {isset:false};

function resetCanvas(c){
  c.width = $(window).innerWidth();
  c.height = $(window).innerHeight();
  //c.scrollTo(0,0);
}

function refreshCanvas(ctx){
  ctx.clearRect(0,0,1920,1080);
  if(left.isset){
    drawBase(ctx, left.startX, left.startY);
    drawHandle(ctx, left.startX, left.startY, left.curX, left.curY);
  }
  if(right.isset){
    drawBase(ctx, right.startX, right.startY);
    drawHandle(ctx, right.startX, right.startY, right.curX, right.curY);
  }
}

function drawBase(ctx, x, y){
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.arc(x,y,40,0,2*Math.PI);
  ctx.stroke();
}

function drawHandle(ctx, startX, startY, curX, curY){
  //stop handle when leaving joystick
  var x = curX - startX;
  var y = curY - startY;
  if( ( (x*x) + (y*y) ) >= (1600) ){
    var f = y/x;
    if(x < 0) var invert = true;    
    x = 0;
    y = 0;
    while( ( (x*x) + (y*y) ) <= (1600) ){
      y = x*f;
      if(invert) x--;
      else x++;
    }
    x += startX;
    y += startY;    
  }
  else {
    x = curX;
    y = curY;
  }

  ctx.beginPath();
  ctx.lineWidth = 4;
  ctx.arc(x,y,20,0,2*Math.PI);
  ctx.stroke();
}

function side(x){
  var c = document.getElementById("canvas");
  var dead = c.width/20;
  var left = (c.width - dead)/2;
  var right = left + dead;
  if(x < left) return "left";
  else if(x > right) return "right";
  else return false;
}

我试着做得尽可能简单，因为我需要速度。然而，我还没有成功。谢谢你的建议

我也在考虑做同样的事情，但网上没有太多。我从一本“傻瓜书”中找到了这个例子

我知道我的回答晚了6年，但游戏渲染循环中出现性能问题的原因是，游戏操纵杆的移动与mousemove事件的触发速率有关。这比画布刷新速度慢

相反，您应该执行以下操作：

鼠标按下时检测并设置，您的鼠标移动逻辑是否基于老鼠倒下了鼠标启动时检测并取消设置

我在找类似的东西，发现