Question

您好我在这个网站和互联网上看了几个小时，如何用html5 / javascript移动一个对象，我找到了很多答案，但没有一个答案对我有用。我想解释一下我的问题：我只是想用键盘控制来移动这两个矩形中的一个，但是如果没有帮助它对我来说太难了（我只用了2个月学习javascript / css / html5）。请不要对这个问题投不好票，我想帮助并在这个网站上得到帮助。

这是代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
  Your browser does not support the canvas element.
</canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,30,30);

  var canvas1 = document.getElementById("myCanvas1");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(150,150,30,30);
</script>

</body>
</html>

谢谢大家，我想在意大利学习，但是没有合适的学校/课程，我必须在互联网上努力工作。

Answer 1

您需要收听键盘事件，并捕获要用于移动矩形的键的键代码。然后，您可以递增/递减矩形对象的绝对位置以移动它。

document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
    object.x -= 1;
}
//top
else if(event.keyCode == 38) {
    object.y -= 1;
}
//right
else if(event.keyCode == 39) {
    object.x += 1;
}
//bottom
else if(event.keyCode == 40) {
    object.y += 1;
}
}

这是working example

Answer 2

我尝试使用该代码，但我认为我使用的很差：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);


var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);

}

document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
    ctx1.x -= 1;
}
//top
else if(event.keyCode == 38) {
    ctx1.y -= 1;
}
//right
else if(event.keyCode == 39) {
    ctx1.x += 1;
}
//bottom
else if(event.keyCode == 40) {
    ctx1.y += 1;
}
}


</script>

</body>
</html>

Answer 3

我想你忘了画画布了。 Ctx.x等只是设置位置而不是绘制。所以也许你必须调用dr w（）函数

Answer 4

到yRand

我应该在哪里添加绘图功能？你能把它自己插入代码中吗？：○

<!DOCTYPE html>
<html>
<body>


<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);


var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);

}

document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
    ctx1.x -= 1;
}
//top
else if(event.keyCode == 38) {
    ctx1.y -= 1;
}
//right
else if(event.keyCode == 39) {
    ctx1.x += 1;
}
//bottom
else if(event.keyCode == 40) {
    ctx1.y += 1;
}
}


</script>
</body>
</html>

Answer 5

@Simone P：在你的脚本中，试试这个：

var ctx = canvas.getContext("2d");
function clean() {
  canvas.width = canvas.width;
}
var positionDef = { x: 30, y: 30 };
var position = { x: 30, y: 30 };
ctx.fillStyle="#FF0000";
ctx.fillRect(position.x,position.y,20,20);
var move = {
    up: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.y -= 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    right: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.x += 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    down: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.y += 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    left: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.x -= 3;
      ctx.fillRect(position.x,position.y,20,20);
    },    
}
function keyDownEvent(e) {
  switch(e.keyCode) {
    case 40:
      move.down();
      break;
    case 39:
      move.right();
      break;
    case 38:
      move.up();
      break;
    case 37:
      move.left();
      break;
  }
}
document.addEventListener("keydown", keyDownEvent, false);

Answer 6

@yRand谢谢!!!!! 它有效：）

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
  Your browser does not support the canvas element.
</canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,30,30);

  var canvas1 = document.getElementById("myCanvas1");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(150,150,30,30);

var ctx = canvas.getContext("2d");
function clean() {
  canvas.width = canvas.width;
}
var positionDef = { x: 30, y: 30 };
var position = { x: 30, y: 30 };
ctx.fillStyle="#FF0000";
ctx.fillRect(position.x,position.y,20,20);
var move = {
    up: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.y -= 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    right: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.x += 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    down: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.y += 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    left: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.x -= 3;
      ctx.fillRect(position.x,position.y,20,20);
    },    
}
function keyDownEvent(e) {
  switch(e.keyCode) {
    case 40:
      move.down();
      break;
    case 39:
      move.right();
      break;
    case 38:
      move.up();
      break;
    case 37:
      move.left();
      break;
  }
}
document.addEventListener("keydown", keyDownEvent, false);

</script>

</body>
</html>

当我按下键时其他矩形消失了...如何修复它们？

如何移动矩形＆＃34; var canvas1＆＃34;那个代码？

6 个答案: