我正在尝试在 HTML5 Canvas 上创建虚拟触摸操纵杆。我找到了几种解决方案，其中一种确实有效，但对我来说太复杂了，无法修改，所以我自己做了很多工作，但存在一些问题。它不支持同时使用两个操纵杆，而且速度非常慢:(请告诉我应该走的路。我的 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.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;
}
我试图尽可能简单地做到这一点，因为我需要它很快。然而我还没有成功。谢谢各位的建议
最佳答案
我正在考虑做同样的事情，但网上没有太多。我从一本“For Dummies”书中找到了这个例子... Virtual Joystick for Your HTML5
关于javascript - HTML5 Canvas 触摸操纵杆性能问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22047504/