如何正确移动具有超过 2 个值的画布对象

Question

我正在尝试创建画布 HTML 5 来移动对象并在它到达终点时停止。为此，我为 X 设置了 10 个值，为 Y 设置了 10 个值。首先，我需要将所有值作为 X 和 Y 的坐标。单击按钮时，动画应该在到达结束时开始和停止。

注意：我必须为每个 X 和 Y 计算 10 个值，当到达 X 和 Y 的最后一个值时必须停止鱼移动。这是我必须遵循的要求。

我的代码仅适用于前两个 X 和 Y 值。我不知道怎么做剩下的。我试图在GetStarted() 函数中创建for loop，但它也不起作用。

function GetStarted(){

  for(var i=0; i<10; i++){
  // get the canvas's 2d context
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  // clear the canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  // get the position
  var abc = Number(document.getElementById("x").value);
  var xyz = Number(document.getElementById("y").value); 

  // creating an image from scratch
  var image = new Image();
  image.src = "https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png";

  // when the image are loaded,   
  // draw the image at the specified position
  image.onload = function() {
    context.drawImage(image, abc, xyz); 
  };
}
}

#x,#y {
width : 60px;
}

<table>
<tr>
<td> X </td> 
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
<td> <input id="x" /> </td>
</tr>

<tr>
<td> Y </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td>
<td> <input id="y" /> </td> 
</tr>
</table>
<button onClick="GetStarted()">
Swim little fish</button>
<br /><br />
<canvas id="canvas" width="1200" height="300"
style="border:1px solid black;">
Your browser does not support canvas.
<img src="https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png" id="fishes">

</canvas>
</body>
</html>

Answer 1

这是移动鱼的起点：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = y = 0

// creating an image from scratch
var image = new Image();
image.onload = function() {
  context.drawImage(image, x, y);
};
image.src = "https://www.uow.edu.au/~dong/w3/assignment/a8/fish.png";

function GetStarted() {
  setInterval(Move, 20)
}

function Move() {
  x = (x + 9) % canvas.width;
  y = (y + 1) % canvas.height; 
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, x, y);
}

<button onClick="GetStarted()">Swim little fish</button> <br /><br />

<canvas id="canvas" width="600" height="170" style="border:1px solid black;"></canvas>

如您所见，我对您的代码进行了重大更改！

现在鱼移动了，但是没有地方可以进入 X 和 Y 就像你有你所拥有的那样不会做一个非常平滑的运动反而更像是在跳来跳去，你也不能给出相同的id 到 html 元素，并期望您可以使用 document.getElementById("y") 获得所需的元素，但它无法正常工作