如何移动矩形“;var canvas1”;在那个代码上

How to move the rectangle "var canvas1" on that code?

本文关键字：canvas1 var 代码 何移动 移动      更新时间：2023-09-26

嗨，我在这个网站和互联网上花了几个小时研究如何使用html5/javascript移动对象，我找到了很多答案，但这些答案对我来说都没有用。我想解释一下我的问题：我只想用键盘控制移动这两个矩形中的一个，但如果没有帮助，这对我来说太难了（我只学习了两个月的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>

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

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

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

下面是一个工作示例

@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);

我试过用那个代码，但我认为我用的很糟糕：

<!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>

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

到yRand

我应该在哪里添加draw函数？你能自己把它插入代码吗？：o

<!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>

@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>

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

相关文章：