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

我正在尝试在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>

而触摸.js是这样的：

//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;
}

我试图尽可能简单，因为我需要它快速。然而，我还没有成功。感谢您的建议

我正在考虑做同样的事情，但网上没有很多。我从一本"傻瓜书"中找到了这个例子......适用于您的 HTML5 的虚拟操纵杆

我知道我的回应晚了 6 年，但您在游戏的渲染循环中遇到"性能"问题的原因是您将操纵杆的移动附加到触发mousemove事件的速率上。这比画布刷新率慢。

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

检测并设置鼠标何时关闭
在刷新循环中，根据是否执行鼠标移动逻辑鼠标已关闭
当鼠标打开时检测和取消设置

相关内容

最新更新

热门标签：